CSS伪类

什么是伪类？

CSS伪类是用来选择处于特定状态的元素的选择器。它们允许您基于用户交互、文档结构或其他条件来应用样式，而无需修改HTML结构。

伪类的特点：

以冒号（:）开头
基于元素的状态或位置
可以与其他选择器组合使用
提高用户体验和交互性
无需修改HTML结构

伪类语法

伪类的基本语法如下：

                        CSS
                    
                        selector:pseudo-class {
    property: value;
}

浏览器支持

大多数伪类在现代浏览器中都有很好的支持：

Chrome 1.0+ (基本伪类)

Firefox 1.0+ (基本伪类)

Safari 1.0+ (基本伪类)

Edge 12.0+

IE 9.0+ (基本伪类)

用户交互伪类

这些伪类基于用户的交互行为，是提升用户体验的重要工具：

:hover

当用户将鼠标悬停在元素上时应用样式：

                        CSS
                    

                        a:hover {
    color: red;
    text-decoration: underline;
}
                    

悬停查看效果

:active

当元素被激活（如点击）时应用样式：

                        CSS
                    

                        button:active {
    background-color: darkblue;
    transform: scale(0.95);
}
                    

:focus

当元素获得焦点时应用样式，通常用于表单元素和可聚焦元素：

                        CSS
                    

                        input:focus {
    border-color: blue;
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
                    

:focus-within

当元素或其任何后代元素获得焦点时应用样式：

                        CSS
                    
                        .form-group:focus-within {
    border-left: 3px solid blue;
}

结构伪类

这些伪类基于元素在文档结构中的位置：

:first-child 和 :last-child

选择作为其父元素的第一个/最后一个子元素的元素：

                        CSS
                    

                        li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}
                    

第一个项目
第二个项目
第三个项目
最后一个项目

:nth-child()

选择作为其父元素的第n个子元素的元素：

                        CSS
                    

                        /* 选择所有偶数项 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 选择所有奇数项 */
tr:nth-child(odd) {
    background-color: white;
}

/* 选择第3项 */
li:nth-child(3) {
    color: red;
}

/* 选择每3个一组的第一个 */
div:nth-child(3n+1) {
    clear: left;
}
                    

1

2

3

4

5

使用:nth-child(odd)和:nth-child(even)的示例

:nth-of-type()

选择作为其父元素的特定类型的第n个子元素的元素：

                        CSS
                    

                        /* 选择第二个段落 */
p:nth-of-type(2) {
    font-style: italic;
}
                    

:only-child

选择作为其父元素唯一子元素的元素：

                        CSS
                    
                        li:only-child {
    color: red;
}

表单相关伪类

这些伪类专门用于表单元素，提供丰富的表单交互体验：

:checked

选择被选中的单选按钮或复选框：

                        CSS
                    
                        input[type="checkbox"]:checked {
    background-color: green;
}

:disabled 和 :enabled

选择禁用或启用的表单元素：

                        CSS
                    

                        input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

input:enabled {
    background-color: white;
}
                    

:valid 和 :invalid

选择通过或未通过验证的表单元素：

                        CSS
                    

                        input:valid {
    border-color: green;
}

input:invalid {
    border-color: red;
}
                    

:required 和 :optional

选择必填或可选的表单元素：

                        CSS
                    

                        input:required {
    border-left: 3px solid red;
}

input:optional {
    border-left: 3px solid green;
}
                    

:in-range 和 :out-of-range

选择在指定范围内或超出范围的输入元素：

                        CSS
                    

                        input:in-range {
    background-color: #d4edda;
}

input:out-of-range {
    background-color: #f8d7da;
}
                    

其他常用伪类

:not()

选择不匹配指定选择器的元素：

                        CSS
                    

                        /* 选择所有不是段落的元素 */
:not(p) {
    margin: 0;
}

/* 选择所有不是第一个子元素的列表项 */
li:not(:first-child) {
    border-top: 1px solid #ccc;
}
                    

:empty

选择没有任何子元素的元素：

                        CSS
                    
                        div:empty {
    display: none;
}

:root

选择文档的根元素（HTML文档中的<html>元素）：

                        CSS
                    

                        :root {
    --primary-color: #82255E;
    --font-size: 16px;
}
                    

:target

选择当前活动的锚点目标：

                        CSS
                    
                        :target {
    background-color: yellow;
}

:lang()

选择带有指定lang属性的元素：

                        CSS
                    
                        p:lang(en) {
    font-family: "Times New Roman", serif;
}

伪类组合使用

伪类可以与其他选择器组合使用，创建更精确的选择：

                        CSS
                    

                        /* 选择表格中偶数行且悬停的行 */
tr:nth-child(even):hover {
    background-color: #e6f7ff;
}

/* 选择不是第一个子元素的链接且悬停时 */
a:not(:first-child):hover {
    text-decoration: underline;
}

/* 选择被禁用的输入框且获得焦点时 */
input:disabled:focus {
    outline: 2px solid orange;
}

/* 选择被选中且悬停的复选框 */
input[type="checkbox"]:checked:hover {
    box-shadow: 0 0 5px green;
}
                    

伪类与伪元素组合

伪类也可以与伪元素组合使用：

                        CSS
                    

                        /* 悬停时显示自定义提示 */
.tooltip:hover::after {
    content: "这是一个提示";
    position: absolute;
    background: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
}
                    

伪类最佳实践

性能考虑

某些伪类可能会影响性能，特别是在复杂的选择器中：

:nth-child() 和 :nth-of-type() 在大型文档中可能影响性能
:hover 伪类应谨慎使用，避免复杂的动画和变换
复杂的 :not() 选择器可能影响渲染性能

可访问性考虑

使用伪类时需要考虑可访问性：

不要仅依赖颜色变化来传达信息
确保焦点状态清晰可见
为触摸设备提供适当的交互反馈
考虑使用 :focus-visible 伪类来改善键盘导航体验

浏览器兼容性

虽然大多数伪类在现代浏览器中都有很好的支持，但某些较新的伪类可能需要考虑兼容性：

:focus-visible 是相对较新的伪类
:where() 和 :is() 伪类在旧版浏览器中可能不受支持
某些伪类在移动浏览器中的行为可能与桌面浏览器不同

高级伪类选择器

:is() 和 :where()

这两个伪类允许您以更简洁的方式编写复杂的选择器：

                        CSS
                    

                        /* 传统写法 */
header p, main p, footer p {
    color: blue;
}

/* 使用 :is() */
:is(header, main, footer) p {
    color: blue;
}

/* 使用 :where() */
:where(header, main, footer) p {
    color: blue;
}
                    

:is() 与 :where() 的区别：

:is() 使用选择器的特异性
:where() 的特异性始终为0
在需要覆盖样式时，:where() 通常更有用

:has()

:has() 伪类允许您选择包含特定子元素的父元素：

                        CSS
                    

                        /* 选择包含图片的段落 */
p:has(img) {
    border: 1px solid #ccc;
}

/* 选择包含被选中复选框的表格行 */
tr:has(input[type="checkbox"]:checked) {
    background-color: #e6f7ff;
}
                    

注意： :has() 伪类在CSS选择器级别4中定义，目前浏览器支持有限。请检查目标浏览器的兼容性。