本文共 1376 字,大约阅读时间需要 4 分钟。
一. 伪类选择器
基本概念: CSS伪类用于为某些选择器添加特殊效果,通过在DOM中插入修饰类元素实现。这些修饰类元素对用户可见,但对DOM不可见。伪类的效果通常可通过添加实际类名实现。
1.1 动态伪类选择器
根据用户行为定义元素状态的伪类选择器:
- E:link:定义未访问的链接状态。
- E:visited:定义已访问的链接状态。
- E:active:定义鼠标点击未抬起时的状态。
- E:hover:定义鼠标悬停时的状态。
- E:focus:定义鼠标点击后抬起时的状态。
注意:超链接伪类选择器需按顺序使用,a:hover应放在a:link和a:visited之后,a:active应放在a:hover之后以确保有效性。
可优化方式:将相同样式合并至a:hover选择符下,并使用hover属性简化代码。
1.2 结构伪类选择器
用于根据元素位置或类型选择特定元素的伪类选择器:
- E:first-child:选择父元素的第一个子元素。
- E:last-child:选择父元素的最后一个子元素。
- E:root:选择匹配元素的根元素(通常为HTML根元素html)
- E F:nth-child(n):选择父元素E的第n个子元素F(n从1开始)
- E F:nth-last-child(n):选择父元素E的倒数第n个子元素F
- E:nth-of-type(n):选择父元素中具有指定类型的第n个E元素
- E:nth-last-of-type(n):选择父元素中具有指定类型的倒数第n个E元素
- E:first-of-type:选择父元素中第一个匹配E的元素
- E:last-of-type:选择父元素中最后一个匹配E的元素
- E:only-child:选择父元素只含有一个子元素且该子元素匹配E的元素
- E:only-of-type:选择父元素中只含有一个与自己类型相同的子元素
- E:empty:选择没有子元素且不含文本的空元素
注意:结构伪类选择器中的子元素编号从1开始,需避免n值为0的情况。
1.3 目标伪类选择器
根据链接目标选择匹配元素的伪类选择器:
- E:target:选择匹配E元素且其内容链接指向指定URL的元素
1.4 语言伪类选择器
根据元素语言属性选择特定语言的元素:
- E:lang(language):选择使用指定语言的元素
1.5 否定伪类选择器
选择不符合特定条件的元素:
1.6 元素状态伪类选择器
用于表单元素的用户状态选择:
- E:checked:选择用户界面中选中状态的表单元素
- E:enabled:选择可用状态的表单元素
- E:disabled:选择不可用状态的表单元素
二. 伪元素选择器
基本概念: CSS伪元素用于在元素中插入特殊内容,通常通过添加实际元素实现,可能会改变DOM结构。
- E::after:在E元素之后插入内容,常与content属性配合使用
- E::before:在E元素之前插入内容
- E::first-letter:为文本元素的第一个字母添加样式
- E::first-line:为文本元素的首行添加样式
- E::selection:为被选中或处于高亮状态的E元素部分添加样式
三. 伪类与伪元素选择器的区别
主要区别在于语法:
- CSS3伪类使用单冒号:
- CSS3伪元素使用双冒号:
转载地址:http://bzxh.baihongyu.com/