:has伪类的到来延伸到其他伪元素和伪类的区别

2023-01-28

字数统计: 1.4k字 | 阅读时长≈ 5分

背景

最近从网上看到一个有趣的CSS应用，就是纯用CSS也能是父子树展示，具体效果如下：

目录节点1
- 节点1
  - 子节点1-1
  - 子节点1-2
- 节点2
  - 子节点2-1
  - 子节点2-2

然后里面关联到一篇新闻，就是:has伪元素的出现会给CSS带来极大的变动，这是为什么，不就是一个CSS伪元素吗？因此去了解一下，才发现这个伪元素确实不一样，主要有以下几点：

可以选择父级元素， a:has(> img)，包含img元素的a元素
可以选择兄弟元素， h1:has(+ p)，后面为p元素的h1元素

为什么有了它之后，CSS会有大变动，因为以往我们的样式都是直接选择元素或者子元素或者后面的元素，如果要选择父元素或前面的元素只能通过命名规范去确定，比如上述两个例子：

a:has(> img)，我们只能通过a.has-img类似样式去命名
h1:has(+ p)，只能通过h1.next-p类似样式去命名

大概清楚它能带来的变化，接下来我们来详细了解一下它。

是什么

在MDN里是这么定义:has()的:

CSS 函数式伪类 :has() 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

你可以这么理解h1:has(+ p)伪元素:

第一步，会先筛选h1元素列表，如果列表长度大于1才会执行has()
第二步，执行+ p，就是判断h1元素列表中哪些元素的下个元素为p
第三步，将筛选后的元素列表返回

再简单点说就是一个过滤器，过滤条件可以是任意CSS表达式。

应用场景

除了上述的场景外，:has() 还可以做以下几个场景：

与:is() :not() 结合使用，如：is:(h1, h2, h3):has(+ :not(h2,h3, h4))
表单必填项, 给每个必填项增加”*””文字，代码如下：

<style>
label:has(+input:required)::before{
  content: '*';
  color: red;
}
</style>
<form>
  <div>
    <label>用户名</label>
    <input required>
  </div>
  <div>
    <label>备注</label>
    <input>
  </div>
</form>

效果如下：

伪类与伪元素

了解完:has()伪类，那么来复习一下CSS中的其他伪类与伪元素。

伪类

伪元素，又称为伪类，是添加到CSS选择器上的关键字，给指定DOM元素添加特殊状态。MDN是这么定义的：

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。 ——MDN 伪类

伪类一般组成为两部分： : + 伪类名，按照伪类的功能进行划分，主要分为以下几类：

元素显示状态伪类，如：:fullscreen :hover
输入状态伪类，如：:focus :actived
语言的伪类，如：:lang()
位置伪类，如：:left
资源状态伪类，如：:playing :paused
时间方面的伪类
树结构的伪类，如： :nth-child()
用户行为伪类，如：:actived
函数式伪类，如：:where :is :not

其实我们真正在使用的没有几个，但是我们仍然要重点关注一下，能加快我们的开发效率，比如：元素显示状态伪类，用户行为伪类, 函数式伪类等

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。——伪元素 MDN

从命名上你就可以看出来，伪元素其实是一个类似的元素东西，虽然有部分写法可以改变样式，但是大部分还是给CSS选择器对应元素增加元素，比较常见的伪元素有：

而且从书写规范来讲，伪元素为::+伪元素名，比较常见的伪元素有以下几种：

::before 给元素添加最前面添加一个子伪元素
::after 给元素添加最后面添加一个子伪元素
::first-line 选择元素第一个
::placeholder 修改有placehodler的样式

部分demo代码测试案例：

<style>
    .article-inner  p.demo-20230108::first-line { color:#f00 }
    .article-inner  p.demo-20230108::first-letter { text-transform: uppercase }
</style>
<div style="width:400px; padding:20px; border:1px solid;">
    <p class='demo-20230108' style="word-break:break-all">abcdefg,首字母要大写，然后第一行是要红色的字体，换行后就变成正常的，这里是一段很长的测试文字。</p>
</div>

效果如下：

abcdefg,首字母要大写，然后第一行是要红色的字体，换行后就变成正常的，这里是一段很长的测试文字。

两者区别

只有一句话： 与伪元素比较，伪类能够根据状态改变元素样式。

参考资料

CSS :has()伪类她来了

本文作者： Qborfy
本文链接： https://www.qborfy.com/today/20230128.html
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！