六虎

原来CSS的伪类这么多，一集都放不下

作者：

前端小智

在

持续创造，加速生长！这是我参加「日新方案 10 月更文应战」的第9天，点击检查活动概况

前情提要

为了丰富自己是常识系统（为了日更薅羊毛），我最近频频翻阅MDN的文档，果然MDN文档常看常新。

最近翻到CSS部分，然后打开了伪类这一栏，好家伙，快60个了（包括试验中的）。

跳过常用的，还是许多。分批分期研究的话，我想三期应该是能够收官。

今日先来第一篇：《有用处但不多的伪类们》

伪类们

:autofill

当输入框的值由浏览器主动填充时，:autofill伪类能够匹配。输入框聚焦时，:autofill伪类会停止匹配。

实例：主动填充高亮边框

为输入框设置主动填充式的高亮边框还是很简单的

input:autofill {
  border: 3px solid #f0ab5c;
}
input:-webkit-autofill {
  border: 3px solid #f0ab5c;
}

展示作用

本来CSS的伪类这么多，一集都放不下

实例：主动填充高亮布景色

MDN里给出了提示，不能经过设置background-color来改动布景颜色。

经过什么办法设置布景色呢？这时候我看到了MDN它底部有几篇外链的文章。经过阅览文章，我找到了设置布景颜色的办法，那便是运用box-shadow设置一个内阴影：

input:autofill {
  box-shadow: 0 0 0px 1000px #f0ab5c inset;
}
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f0ab5c inset;
}

展示作用

本来CSS的伪类这么多，一集都放不下

MDN许多常识点底部会有拜见文章，都是一些不错的文章，感兴趣的能够点开阅览。

:dir()

:dir()伪类匹配特定文本书写方向的元素。

在HTML中，默许的文本书写方向是从左向右，能够经过设置元素dir的值，将文本书写方向改成从右向左。

能够经过:dir()伪类匹配到对应的文本书写方向元素，然后为其设置不同的款式特点（实际用处）。

实例：不同文本书写款式设置

:dir(ltr) {
  color: #f0ab5c;
}
:dir(rtl) {
  color: #000;
}
......
<div class='dir'>默许状况</div>
  <div class='dir' dir='ltr'>
  书写方向从左到右
</div>
<div class='dir' dir='rtl'>
  书写方向从右到左
</div>

展示作用

本来CSS的伪类这么多，一集都放不下

注意事项

1、这个伪类是试验中的功能，所以目前仅Firefox浏览器支撑。

:has()

:has() 伪类能够为包括的一个或多个元素，匹配指定的选择器。它的参数是指定的选择器列表。

进一步拆解一下，:has() 伪类究竟为谁服务，比方：

p:has(span) {
  color: red;
}

上面代码会匹配到包括span元素的p元素，并设置元素下的文字颜色为赤色。

本来CSS的伪类这么多，一集都放不下

实例：选择器列表

:has() 伪类能够匹配多个元素，元素之间用逗号隔开，以下代码会匹配到包括i元素或span元素的p元素：

p:has(i, span) {
  font-size: 14px;
  color: red;
}
p:has(i, span) i {
  font-style: normal;
}

展示作用

本来CSS的伪类这么多，一集都放不下

浏览器兼容性

下图是:has() 伪类的各个浏览器的兼容性表格。其中Firefox浏览器在设置启用之后能够体验:has() 伪类（未来应该会实现支撑）。

本来CSS的伪类这么多，一集都放不下

:in-range

:in-range伪类作用于input元素且其当前值处于特点min 和max 限制的规模之内。

:in-range伪类仅适用于那些具有（或能够接受）取值规模设定的元素。这个设定有意思了，且我试验进程中发现Chrome和Firefox的体现不一样，看下面的实例

实例：输入框可视化提示

我设置了三种输入框分别是

  • 单行文本输入框
  • 未设置min和max的数值输入框
  • 设置了min和max的数值输入框，min值是1，max值是10

运用:in-range伪类为input元素设置了橙色布景色。

input {
  margin-bottom: 10px;
  border: 2px solid #000;
  width: 80px;
}
input:in-range {
  background-color: #f0ab5c;
  border: 2px solid #0f6fb8;
}
......
<input name="text" type="text" />
<input name="num1" type="number" />
<input name="num2" type="number" placeholder="1 ~ 10" min="1" max="10" value="1" />

浏览器体现

  • 单行文本输入框没有任何改变；
  • 未设置min和max的数值输入框，输入前Chrome浏览器具有布景色，输入后就没有布景色了（暂时没有找到原因）；Firefox浏览器没有改变；
  • 设置了min和max的数值输入框，Chrome和Firefox，输入min~max之间的数字，输入框会有布景色；如果数字超出，则没有布景色。
Chrome Firefox
输入前 输入后 输入前 输入后
本来CSS的伪类这么多，一集都放不下
本来CSS的伪类这么多，一集都放不下
本来CSS的伪类这么多，一集都放不下
本来CSS的伪类这么多，一集都放不下

:out-of-range

:out-of-range伪类作用于input元素且其当前值处于特点min 和max 限制的规模之外。

:out-of-range伪类仅适用于那些具有（或能够接受）取值规模设定的元素。我把它和:in-range伪类称之CP组合1号。这俩会一个，另一个也就约等于会了。

实例：输入框可视化提示

我设置了三种输入框分别是

  • 单行文本输入框
  • 未设置min和max的数值输入框
  • 设置了min和max的数值输入框，min值是1，max值是10

运用:out-of-range伪类为input元素设置了蓝色布景色。

input {
  margin-bottom: 10px;
  border: 2px solid #000;
  width: 80px;
  color: #000;
}
input:out-of-range {
  color: #000;
  background-color: #0f6fb8;
}
......
<input name="text" type="text" />
<input name="num1" type="number" />
<input name="num2" type="number" placeholder="1 ~ 10" min="1" max="10" value="12" />

浏览器体现

  • 单行文本输入框没有任何改变；
  • 未设置min和max的数值输入框，浏览器输入数字没有改变；
  • 设置了min和max的数值输入框，输入min ~ max之外的数字，输入框会有布景色；输入min ~ max之内的数字，则没有布景色。
min~max之外 min~max之内
本来CSS的伪类这么多，一集都放不下
本来CSS的伪类这么多，一集都放不下

未完待续

第一集的伪类分享就到这儿了，这期主要介绍了:autofill、:dir()、:has()、:in-range、:out-of-range，每个伪类的运用实例也都尝试了一遍。

最大的收获便是，CSS能玩出花的技能又增加了。

我喜欢创造，每一幅著作都是我将幻想用一只叫做“代码”的画笔，绘制而成。

当我寻觅新的技能的时候，不是构思干涸，而是我需求新的颜色。

而这个循序渐进的学习进程，尽管缓慢，可是积少成多、聚沙成塔。

更多文章