CSS常用伪类选择器详解

1. 用户行为伪类

1.1 :hover

selector:hover 表示匹配鼠标经过的selector选择器元素。

应用场景：

鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等

细节优化：

• 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用）
• 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通过增加focus伪类来优化（使用Tab键来聚焦目标元素触发之前的hover对应的效果）

注意事项：

:hover不适用于移动端，虽然也能触发，但消失并不敏捷，体验反而奇怪。

1.2 :active

selector:active 表示匹配激活状态的selector选择器元素（通过鼠标主键点击或触屏触摸的过程中触发样式，结束后还原样式），支持任意html元素。

应用场景：

链接和按钮点击过程中的样式设置

注意事项：

（1）IE浏览器中，:active无法冒泡
（2）IE浏览器中，和:标签触发active样式后无法还原
（3）移动端Safari浏览器下，:active伪类默认无效，可通过touch事件代替
（4）键盘无法触发:acitve伪类样式，按Enter键会触发点击事件

1.3 :focus

selector:focus 表示匹配聚焦状态的selector选择器元素。

有效范围：

• 非disabled状态的表单元素（包括input，select和button元素）
• 含有href属性的a元素
• area和summary元素

应用场景：

常用于表单元素聚焦时的边框高亮显示

注意事项：

使用:focus来修改按钮的样式时，建议按钮就用button元素，而非span或div标签模拟的按钮。因为考虑到纯键盘无鼠标的场景,button元素可以通过键盘Tab触发聚焦，而span或div元素不行

1.4 :focus-within

selector:focus-within 表示当前selector选择器元素或者其子元素聚焦时都会匹配（而focus只会匹配对应元素本身）。说明子元素聚焦可以让父元素的样式变化

应用场景：

用于表单form或列表元素中设置子表单或子元素的一些通用样式

示例：
form表单中任一表单元素聚集时让所有表单元素前面文字高亮

<form class="form">
    <label for="username">用户名：label><input id="username" type="text"/><br>
    <label for="password">密码：label><input id="password" type="text"/>
form>

form:focus-within label{
        color:darkblue;
        text-shadow: 0 0 1px;
    }

1.5 :focus-visible

应用场景：

selector:focus-visible 匹配的场景是：元素聚焦，同时浏览器认为聚焦轮廓应该显示。

经典场景是一些元素(比如a元素)我们认为在点击时不应该有轮廓，而键盘访问时应该有轮廓。而此时当你遇到某个元素点击和键盘访问时都有轮廓时，你想修改成前面那样就可以用这个伪类。

换句话说:focus-visible可以判断是由键盘还是鼠标触发的聚焦行为

:focus:not(:focus-visible){
     /*这里的focus-visible可以看作匹配是键盘聚焦*/
       /*所以这里匹配不是键盘引发的聚焦行为（比如鼠标触发）*/
     outline: 0;
 }

2. URL定位伪类

2.1 :link

selector:link 表示匹配页面上href链接没有被访问过的a元素

注意事项：

该伪类已基本被a标签所代替,直接设置a标签的样式即可

2.2 :visited

selector:visited 表示匹配页面上访问过的a元素

注意实项：

• :visited支持的CSS属性有限，比如不支持before和after这类伪元素（即不支持a:visited::before或after）

• 使用:visited设置颜色时，UI表现上不支持本透明。要么纯色，要么全透明，例如不支持color:rgba(255,0,0,0.3)

• 使用:visited时，如果设置了某个属性的样式，目标元素原本使用:visited前并没有设置过该属性的样式，则该样式无效。即只能重置修改，不可凭空新建

  示例：

 a{
      color:blue
   }
 a:visited{
      color:yellow;
      /*此时background-color不生效*/
      background-color: red;
  }

 a{
    color:blue;
     background-color: green;
        
  }
    a:visited{
        color:yellow;
        /*此时background-color生效*/
        background-color: red;
    }

2.3 :any-link

selector:any-link 表示匹配所有设置了href属性的链接元素以及匹配:link伪类和:visited的元素

应用场景：

:any-link是真正意义上的链接伪类

注意实项：

• 与a标签选选择器相比，该伪类匹配更加准确识别链接元素；与:link伪类相比，该伪类无须担心:visited伪类对样式的干扰
• IE不支持

2.4 :target

selector:target 表示匹配URL锚点对应的元素。例如http://xxx.com/#detail，则可设置CSS样#detail:target对应通过锚点链接跳转到id为detail的元素时的元素样式

注意实项：

即使部分浏览器支持a元素的name属性就是锚点值，点击时也会触发锚点跳转，但是考虑兼容性，还是建议统一用href来跳转锚点

3. 输入伪类

3.1 :enabled和:disabled

用于表单元素是否禁用状态的切换，匹配是否设置了disabled属性的表单元素

应用场景：

• :enabled伪类在CSS中较为鸡肋，因为表单元素默认状态就是enabled状态。但在js中可方便用于获取当前页面的可用的表单元素
• :disable伪类经典场景是按钮禁用，尤其是解决按钮点击后发送异步请求时的重复点击问题，可通过控制disabled状态来实现。

注意实项：

• a标签设置disabled属性无效，无法匹配:disabled伪类
• 含有readonly属性的表单元素也会匹配:disabled伪类
• 尽量用button来实现按钮禁用效果，而非a元素配合pointer-events: none来实现。因为此时用a元素依然可通过键盘Tab触发按钮点击。

3.2 :read-only和:read-write

用于匹配输入框元素是否只读还是可读可写，匹配是否设置了readonly属性的输入框元素

注意事项：

• 这两个伪类只对input和textarea元素有效
• disalbed状态的输入框会出乎意料的匹配:read-write伪类
• 由于IE和FireFox对这对伪类的兼容性问题，建议使用属性选择器如textarea[readonly]来匹配
• readonly输入框和普通输入框样式类似，但disabled输入框会文字置灰

3.3 :placeholder-shown

一个输入框如果placeholder内容显示 ，则该伪类会匹配它

应用场景：

可通过该伪类判断输入框是否被输入了内容，并配合伪元素来显示提示信息：

<input placeholder="请输入姓名" type="text"><small>small>

 input:placeholder-shown+small::before{
        content:' 尚未输入内容'
    }

3.4 :default

该伪类匹配处于默认状态的表单元素

应用场景：

常用于匹配处于设置了selected属性的下拉框option元素，设置了checked属性的单复选框元素，添加额外样式让用户更加清楚默认值是什么。例如该伪类配合伪元素给一些默认值设置额外的提示信息来增强体验

注意事项：

• js脚本快速修改元素的selected或者checked属性不会影响:default伪类的默认匹配效果
• 虽然option元素在没有设置selected属性的前提下也会默认呈现第一个option，但它不会匹配:default伪类

3.5 :checked

该伪类匹配处于默认选中状态的单，复选框元素

注意事项：

为什么应该用:checked伪类而不是属性选择器[checked]：

• :checked伪类只匹配标准表单控件元素，而[checked]属性选择器会匹配任意设置了checked属性的元素（包括自定义的checked属性）
• 通过js脚本给某元素设置了checked属性后并不会使该元素本身添加了checked属性。所以此时[checked]属性选择器不会匹配，但是:checked伪类会匹配

3.6 :invalid和:valid

该伪类匹配有效性验证是否通过的表单元素

应用场景：

HTML5中给表单元素提供了required（必输项），pattern（输入值正则匹配）等验证属性，当输入的内容并不符合这些属性规则时，就会匹配:invalid伪类，反之匹配:valid伪类

注意事项：

由于页面一加载便会执行CSS，如果我们设置了:invalid匹配样式，例如一些红色的警告提示样式，一进页面就显示这些会影响用户体验。鉴于此，新推出一个:user-invalid伪类，但是浏览器兼容性很差。还可通过js脚本来控制。

3.7 :required和:optional

该伪类匹配是否设置了required属性的表单元素。只要表单元素没有设置required属性，就会匹配:optional伪类

4. 树结构伪类

4.1 :root

对于XHTML和HTML文档，该伪类匹配的就是html根元素标签

应用场景：

由于现如今浏览器对CSS变量的支持，对于类似整站颜色，布局尺寸这样的变量，业界约定俗成变量由:root伪类负责，而html选择器负责样式。虽然他俩实质是一样的。例如：

 :root{
        --blue:#2486ff;
        --red:#f4615c;
        --layerWidth:1190px
    }
  html{
       overflow: auto;
   }

注意事项：

:root伪类与html标签选择器的区别：

• :root伪类优先级更高
• :root伪类在IE9以上才支持，兼容性低于html标签选择器

4.2 :empty

:empty选择器选择每个没有任何子级（包括文本节点）的元素。

应用场景：

• 隐藏空元素。尤其是一些设置了padding或margin属性的容器在没有内容时依然会占用空间，此时通过:empty匹配来设置它们display:none来解决
• 对于一些数据展示的部分，尤其是通过异步请求动态返回的数据。如果某些字段数据为空导致的空标签，可通过:empty伪类匹配并配合伪元素添加一些类似"暂无数据"的提示效果

注意事项：

• 如果元素标签内只有注释，也不会匹配:empty伪类
• 如果标签换行或者元素标签内只有空格，也不会匹配:empty伪类
• 通过伪元素::before或after给元素插入了内容，但如果标签依然为空，则依然会匹配:empty

4.3 :first-child和:last-child

selector:first-child 表示匹配作为其父元素的第一个子元素的selector元素

selector:last-child 表示匹配作为其父元素的最后一个子元素的selector元素

应用场景：

这两个伪类最常用于对列表元素的第一个/最后一个子元素的通用样式的重置。例如除了最后一个子元素，其他子元素都添加底部边框。

  	li{
        border-bottom: 1px solid #cccccc;
    }
    li:last-child{
        border-bottom:none
    }

4.4 :only-child

该伪类匹配没有任何兄弟元素的元素，或者说是父元素中唯一子元素的元素

注意事项：

• :only-child在匹配时会忽略元素前后的文本内容（包括文本节点和注释）

4.5 :nth-child()和nth-last-child()

selector:nth-child(n) 表示匹配第n个子元素的selector元素

selector:nth-last-child(n) 表示匹配从后往前数的第n个子元素的selector元素

应用场景：

这两个伪类适用于内容动态，无法确定的匹配场景（如通过异步请求获取的列表数据）。例如一些列表数据奇偶数子元素的背景颜色不同，前N个子元素的高亮显示等场景。如果数据是纯静态的，建议还是使用类名或属性选择器进行匹配

相关语法：

二者相关语法是统一的，以nth-child为例：

• selector:nth-child(odd或even)表示匹配作为其父元素的第奇数/偶数个子元素的selector元素

• selector:nth-child(An+B)表示匹配符合对应规则的子元素。

  其中A，B，n均为不为负的整数，但A前面可以添加负号。

  示例：

  nth-child(5n)匹配第5，10，15…个子元素

  nth-child(3n+4)匹配第4，7，10…个子元素

  nth-child(-n+3)匹配前3个子元素

  nth-last-child(-n+3)匹配最后3个子元素

注意事项：

• :only-child在匹配时会忽略元素前后的文本内容（包括文本节点和注释）

4.6 :first-of-type和last-of-type

selector:first-of-type 表示匹配与selector元素标签类型一致的第一个子元素

selector:last-of-type 表示匹配与selector元素标签类型一致的最后一个子元素

示例：

 dl>:first-of-type{
        color:red
    }

 <dl>
       <dt>哈哈dt>
       <dd>嘿嘿dd>
   dl>

可以发现，dt和dt均匹配了该伪类，因为dt和dd都是dl的子元素中各自同类型标签元素的第一个子元素

4.7 :only-of-type

selector::only-of-type匹配子元素中标签类型与selector元素一致且只有一个的selector元素，该伪类应用场景较少。

注意事项：

匹配:only-child的元素一定匹配:only-of-type，反之则不一定

4.8 :nth-of-type()和nth-last-of-type()

selector:nth-of-type(n) 表示匹配与selector元素标签类型一致的子元素集合里第n个子元素

selector:nth-last-of-type(n) 表示与selector元素标签类型一致的子元素集合里的从后往前数的第n个子元素

相关语法：

与nth-child和nth-last-child伪类类似，这两个伪类也具有相同的语法格式。

应用场景：

主要适用于特定标签组合并且组合不断重复的场景，例如dl标签的子标签dt和dd的组合

注意事项：

:nth-of-type()和nth-last-of-type()这两个伪类的匹配范围是所有相同标签的相邻元素，而nth-child和nth-last-child伪类则匹配所有相邻元素，无视元素类型
、

5. 逻辑组合伪类

5.1 :not()

selector:not()是否定伪类，如果selector元素与()里的选择器不匹配，则会匹配该伪类

应用场景：

使用:not()伪类不仅便于理解，而且保护了原有选择器的优先级，利于维护。它的经典场景适用于一些CSS样式的重置，比如对通用样式的一些例外和特殊情况的处理

注意事项：

• :not()伪类自身优先级为0，最终的优先级由()的选择器表达式决定
• :not()伪类可以不断级联，如input:not(:disabled):not(:read-only){}

5.2 :is()

:is()伪类可以把括号中的选择器依次分配出去，对于那种复杂的有很多逗号分隔的选择器非常有用

示例：

.test>img,.test1>img,.test2>img,.test3>img{
        
    }

可以通过is伪类简写成下面这样：

 :is(.test,.test1,.tes2,.test3)>img{

    }

注意事项：

:is()伪类自身优先级为0，最终的优先级由()里参数优先级最高的那个选择器决定

示例：

 :is(#article,.section) p{

    }

由于id选择器(#article)优先级大于class类选择器(.section)，这段选择器的最终优先级等同于#article p

5.2 :where()

:where()伪类的含义，语法和作用与:is()伪类一致，唯一的区别在于:where()的最终优先级（包括括号里的选择器）始终为0

示例：

:where(#article,#section) .content的最终优先级等同于.content

文章参考资料：张鑫旭《CSS选择器世界》