【前端从0开始】CSS——4、css伪类和伪元素

伪类和伪元素

1. 伪类

1.1 定义

伪类用于向某些选择器添加特殊的效果。

1.2 超链接伪类

给 a 链接添加几种状态：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

1.3 元素获取

伪类可以用于选择元素，无需添加繁琐的类名：

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

2. 伪元素

2.1 定义

CSS伪元素用来添加一些选择器的特殊效果，可以美化元素或添加其他功能。最好使用双冒号，防止与伪类混淆。

2.2 ::first-letter 首字母

::first-letter 伪元素用于向文本的首字母设置特殊样式：

css

p::first-letter {color: red;}

其他常见的伪元素选择器

• ::first-line 首行
• ::first-letter 首字母
• ::before 元素前插入
• ::after 元素后插入

2.3 ::before 与 ::after 的用法总结

• ::before 定位基准是其主元素的右上角，::after 定位基准是主元素的结尾处。
• 当主元素没有内容时，::before 和 ::after 仍会正常工作，需要设置为行内元素并设置高度、宽度等属性。
• content 是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';
• ::before 和 ::after 主要用途是对元素默认样式进行美化，需要结合定位和内容。

3. 伪类与伪元素区别

• 若要给第一项添加样式，可以添加一个类并在该类中定义对应样式。
• 也可以通过 :first-child 伪类为第一个元素添加样式，被修饰的元素依然处于文档树中。
• 若要给段落的第一个字添加样式，可以包裹一个元素并设置该元素的样式。
• 也可以通过 ::first-letter 伪元素为其添加样式，但实际上文档树中并不存在这个元素。
• 伪类操作文档树中已有的元素，伪元素则创建了文档树外的元素。区别在于是否创建了一个文档树之外的元素。

CSS3规范要求使用双冒号(::)表示伪元素，以区分伪元素和伪类，如 ::before 和 ::after 伪元素使用双冒号(::)，:hover 和 :active 伪类使用单冒号(:)。大部分浏览器支持伪元素的双冒号(::)表示方法，建议使用双冒号的写法以更好地区分伪类和伪元素。

css

Please note that the content has been reformatted in Markdown format, but you might need to review and adjust the formatting based on your specific requirements.