CSS 高级指南：深入剖析内容 (content) 的概念及应用

CSS 中的替换元素

CSS 中的替换元素是指内容可以被替换的元素，常见的有<img>, <iframe>, <video>和<input>等。这些元素允许我们通过外部资源或用户输入来替换默认的内容，从而创建更丰富、更交互的网页。

1. 图片元素 (<img>)

图片元素(<img>)用于在网页中显示图像。通过 src 属性指定图像的路径，浏览器会自动下载并显示图像。我们可以通过 width 和 height 属性来调整图片的大小，也可以通过 alt 属性为图片添加备用文本，以便在图像无法加载时显示。

2. 框架元素 (<iframe>)

框架元素(<iframe>)用于在网页中嵌入另一个网页或外部资源。通过 src 属性指定要嵌入的网页或资源的 URL，浏览器会自动加载并显示该内容。iframe 元素可以用于创建交互式地图、视频播放器或社交媒体小部件等。

3. 视频元素 (<video>)

视频元素(<video>)用于在网页中播放视频。通过 src 属性指定视频文件的路径，浏览器会自动加载并播放视频。我们可以通过 controls 属性来添加播放控件，也可以通过 autoplay 属性让视频自动播放。

4. 输入元素 (<input>)

输入元素(<input>)用于收集用户输入。常见的输入元素类型包括文本框、密码框、单选按钮和复选框。通过 type 属性指定输入元素的类型，通过 name 属性指定输入元素的名称，以便在服务器端处理表单数据。

content 属性

content 属性用于指定替换元素的内容。它可以是文本、图像、视频或其他类型的媒体。content 属性的语法如下：

content: [normal | none | <string> | <url> | <counter> | <attr()> | <content()>]

1. 正常内容 (normal)

normal 表示使用元素的默认内容。例如，对于 <img> 元素，normal 表示显示图像；对于 <video> 元素，normal 表示播放视频。

2. 无内容 (none)

none 表示不显示任何内容。例如，对于 <img> 元素，none 表示不显示图像；对于 <video> 元素，none 表示不播放视频。

3. 字符串内容 (<string>)

<string> 表示使用指定的字符串作为内容。字符串可以是任何文本，包括空格、标点符号和特殊字符。例如，对于 <img> 元素，我们可以使用 content: "Hello, world!" 来显示 "Hello, world!" 这段文字。

4. URL 内容 (<url>)

<url> 表示使用指定的 URL 作为内容。URL 可以指向图像、视频或其他类型的媒体。例如，对于 <img> 元素，我们可以使用 content: url("image.png") 来显示 "image.png" 这张图片。

5. 计数器内容 (<counter>)

<counter> 表示使用指定的计数器作为内容。计数器可以是数字、字母或其他类型的符号。例如，对于 <ol> 元素，我们可以使用 content: counter(li) 来显示有序列表的序号。

6. 属性内容 (<attr()>)

<attr()> 表示使用指定的属性作为内容。属性可以是元素的任何属性，例如 id、class 或 src。例如，对于 <img> 元素，我们可以使用 content: attr(alt) 来显示图片的备用文本。

7. 内容函数 (<content()>)

<content()> 表示使用指定的