CSS 伪类用于向某些选择器添加特殊的效果。 | 属性 | 描述 | | --- | --- | | :active | 向被激活的元素添加样式。| | :focus | 向拥有键盘输入焦点的元素添加样式。| | :hover | 当鼠标悬浮在元素上方时,向元素添加样式。| | :link | 向未被访问的链接添加样式。| | :visited | 向已被访问的链接添加样式。| | :first-child | 向元素的第一个子元素添加样式。| ## 锚伪类 ```css a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ ``` ## :first-child伪类 ```css p:first-child {font-weight: bold;} ``` ## 选择器的优先级 在实际开发中,经常会为同一个标签设置多个样式。使用不同方式的选择器,由于其优先级不同,导致最终的效果也会不同。 选择器的优先级,具体如下: - 内联样式的优先级为 1000 - ID 选择器的优先级为 100 - 类选择器的优先级为 10 - 元素选择器的优先级为 1 - 通配符选择器的优先级为 0 - 继承的样式没有任何优先级 > **值得注意的是:** > > - 当一个样式中包含多个选择器时,需要将所有的选择器的优先级进行相加。 > - 优先级高的选择器优先显示,选择器的计算不会超过其最大的数量级。 > - 如果两个选择器的优先级相同,则哪个选择器最后定义才有效。 > - 如果某个选择器使用了 `!important`,则改选择器的优先级最高。