css伪类选择器

2021-11-10 10:51:54

用户行为伪类
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: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;
}

URL定位伪类
: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;
}
:any-link
selector:any-link 表示匹配所有设置了href属性的链接元素以及匹配:link伪类和:visited的元素

应用场景：

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

注意实项：

与a标签选选择器相比，该伪类匹配更加准确识别链接元素；与:link伪类相比，该伪类无须担心:visited伪类对样式的干扰
IE不支持
:target
selector:target 表示匹配URL锚点对应的元素。例如http://xxx.com/#detail，则可设置CSS样#detail:target对应通过锚点链接跳转到id为detail的元素时的元素样式

注意实项：

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

输入伪类
3.1 :enabled和:disabled
用于表单元素是否禁用状态的切换，匹配是否设置了disabled属性的表单元素

应用场景：

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

a标签设置disabled属性无效，无法匹配:disabled伪类
含有readonly属性的表单元素也会匹配:disabled伪类
尽量用button来实现按钮禁用效果，而非a元素配合pointer-events: none来实现。因为此时用a元素依然可通过键盘Tab触发按钮点击。
:read-only和:read-write
用于匹配输入框元素是否只读还是可读可写，匹配是否设置了readonly属性的输入框元素

注意事项：

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

应用场景：

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

input:placeholder-shown+small::before{
content:‘ 尚未输入内容‘
}
: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.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
}

1
2
3
4
5
6
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个子元素的高亮显示等场景。如果数据是纯静态的，建议还是使用类名或属性选择器进行匹配

码农公寓

相关文章