CSS最新的强大:has() 父层选取器来了！

更新日期: 2023-01-10阅读: 541标签: 伪类分享

复制链接

新浪微博

QQ 好友

扫一扫分享

:has() 伪类是个非常好用的选取器，能够做到许多原本需要使用JS 才能达到的事，他的规范在很久之前就有制定，但是碍于浏览器性能的影响一直没有被支援，直到今年2022 ，随着Safari 开始支援:has() 的使用，未来各大浏览器跟着开放支援也只是时间的问题，所以是时候来认识这个强大的工具了！

1. :has() 伪类的用法

在css中，伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

用白话文来说，就是指：若某元素匹配某选择器，就可以让它做到某些我们指定要它做的事情。

以下举出一些简单好理解的例子：

a:has(img) { display: block; }

这个例子表示，如果有任何<a>元素里面包含<img>的话，则这个<a>元素会吃到display: block; 的样式。

除了可以直接选取tag 之外，:has() 也支援所有的CSS 字符，以下用> 举个例子：

a:has(> img) { display: block; }

这个例子表示，如果有任何<a>元素里面有直接的子元素<img>的话，则这个<a>元素会吃到display: block; 的样式，那如果<a>只是有其他非直接子元素的更远后代包含<img>的话就不会发挥作用。

再来，:has()也支援复杂选择器，例如：

article:has(h5, p) { background-color: #f0f3f9; }

这个例子表示，假设有<article>元素当中包含了<h5>或<p>，则该<artical>背景色会变为#f0f3f9。

那如果想要的选择条件从或变为且呢？那就改为这样：

article:has(h5):has(p) { background-color: #f0f3f9; }

这样的写法就会变为，同时包含了<h5>与<p>的<article>才会改变背景色。

以上举了少数几个:has() 能够使用的写法，那么当实际使用时可以怎么运用呢？接着来举例运用场景。

2. :has() 伪类的运用

• 元素表单必填栏位加上" * "

<form>
  <item>
    <label>用戶名</label>
    <input required>
  </item>
  <item>
    <label>備註</label>
    <input>
  </item>
</form>

这时我们可以利用:has() 来帮第一个输入条件加上必填的星号：

label:has(+input:required)::before{
  content: '*';
  color: red;
}

在这边我们运用了"+" 来指定与<label>同层级的第一个顺位，且有":required" 条件的<input>，让符合以上条件的input 的label 加上一个::before 伪元素来制作红色的"*"。

如果是以前的做法，可能会需要将要加上必填符号的<label>另外加上新的class name 之类的，那使用:has() 就不需要这么麻烦。

• Navbar 子选项hover 时改变<body> 背景色

从这个架构我们得到了三个基本选项的navbar：

<nav class="menu">
  <a href="#" class="L1">選項1</a>
  <a href="#" class="L2">選項2</a>
  <a href="#" class="L3">選項3</a>
</nav>

现在我们想让每个选项hover 时，整个<body>背景色都会随着改变成三种不同的颜色，我们可以这么做：

＊这边先略过基本的Menu 样式设定，直接切入重点叙述如何让选项 hover 时改变整个<body> 的色彩＊

body:has(.L1:hover) {
  background-color: #3f7fab;
}
body:has(.L2:hover) {
  background-color: #9b6acf;
}
body:has(.L3:hover) {
  background-color: #57936d;
}

可以看到上面的CSS 写法就是利用:has() 让.L1 .L2 .L3 hover 时，<body>去做个别情境下的换色，就这么简单！

但以往想做到这样子的效果，会需要使用到JS ，现在只要短短几行就可以在CSS 解决了，是不是很值得欢呼！

3. :has() 伪类的浏览器兼容

目前:has() 在浏览器的兼容上还不是那么广泛，但是相信在未来一年的时间，一定会更加普及，到时候就可以随心所欲地使用了。

来自：https://www.tpisoftware.com/tpu/articleDetails/2883

链接: https://www.fly63.com/article/detial/12307