在CSS中做语法判断：:has

又是一个css的小知识点 :has
看到has，我的第一反应是javaScript中的has()方法

回顾一下

Map中的has()

Map.prototype.has()
has() 方法返回一个布尔值，指示具有指定键的元素是否存在。

const map1 = new Map();
map1.set('bar', 'foo');

console.log(map1.has('bar'));
// Expected output: true

console.log(map1.has('baz'));
// Expected output: false

Set中的has()

Set.prototype.has()
has() 方法返回一个布尔值来指示对应的值是否存在于 Set 对象中。

const set1 = new Set([1, 2, 3, 4, 5]);

console.log(set1.has(1));
// Expected output: true

console.log(set1.has(5));
// Expected output: true

console.log(set1.has(6));
// Expected output: false

CSS中的:has()

见名思义，CSS中的has看来也是同样的作用了。

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

简单来说：
当父级元素中有符合 :has(xxx) 中xxx条件子元素时，会给父元素添加上对应的样式，也就是通过子级决定父级的样式
这与我们之前对于CSS的认知是完全相反的，因为一般CSS的规范都是自顶向下，由父级到子级，由父级影响子级。

那么看看他的基本使用吧

.class :has(xxx){
    /* style */
}

---

举个🌰： 包含有img元素的.card元素背景变为蓝色

.card:has(img){
    background: blue;
}

---

再举个🌰： 包含有a元素的.card元素，在a元素处于hover状态时，背景色变为蓝色

tips：这样的话，我们在PC端实现一些悬浮下拉菜单时是不是就很简单了呢，甚至不再需要 js

.card:has(a:hover){
    background: blue;
}
/* 当然其他伪类也是可以的 */
.card:has(a:active){
    width: 100px;
    height: 100px;
}

:has()的其他用法

CSS选择符号

比如直接子元素>、相邻兄弟元素+

/* 子元素是img的card元素被匹配 */
.card:has(>img){
    background: blue;
}
/* 相邻兄弟元素是img的card元素被匹配 */
.card:has( +img){
    background: blue;
}

多个判断元素

子元素中有img元素或p元素的card元素，注意这里是或的关系，如果实现与的关系，可以试试连续两个:has()

---

跟其他逻辑伪类混用

• :not() 用来匹配不符合一组选择器的元素
• :is() 选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。

:not()

section:not(:has(span)) {
  border: skyblue solid;
}
section:has(:not(span)) {
  color: deepskyblue;
}

乍一看，这两个写法没什么区别，其实
第一个表示：没有包含 span 元素的 section 元素
第二个表示：包含不是 span 元素的 section 元素

:is()

这个还不是很理解，未完待续 …