CSS逻辑组合伪类

CSS 的逻辑组合伪类有 4 种，分别是：:not()、:is()、:where()和:has()。

否定伪类:not()

否定伪类，是在元素与括号里面的参数不匹配的时候，就会对这个伪类进行匹配。比如：:not(span):{color:red}，这就会匹配不是 span 元素的其他所有元素，包括 html 和 body。

否定伪类:not()的几个特点：

1. :not()的优先级是 0，因为它的优先级是由括号里面的参数来定的；
2. :not()伪类可以同时判断多个选择器，比如input:not(:disabled):not(:read-only) {}​​，表示匹配不属于禁用状态同时也不处于只读状态的 input 元素；
3. not()支持多个表达式，比如：.cs-li:not(li, dd) {}​​，还有另外一种写法：.cs-li:not(li):not(dd) {}​​。但是这两种写法，要考虑兼容性问题；
4. :not()也支持选择符，比如：input:not(.a > .b) { border: red solid; }​​;

:is()

:is()伪类，是把括号里面的选择都分配出去。语法如下：

:is(article) p {}
:is(article, section) p {}
:is(.article[class], section) p {}
.some-class:is(article:not([id]), section) p {}​​
1
2
3
4

is 这个伪类最大的作用，就是在简化选择器。比如我们要设置多个 div 内的图片样式，样式代码如下：

.div-a > img,
.div-b > img,
.div-c > img,
.div-d > img {
   display: block;
   width: 100%; height: 100%;
   border-radius: 50%;
}​​
1
2
3
4
5
6
7
8

通过 is 伪类来简化一下：

:is(.div-a,.div-b,.div-c,.div-d)>img{
   display: block;
   width: 100%; height: 100%;
   border-radius: 50%;
}
1
2
3
4
5

:where()伪类的功能和 is 是一样的，只是它的优先级一直都是 0，会忽略括号内参数的优先级。比如：:where(.article, section) p {}​​的优先级就是 p 标签的优先级。

关联伪类:has()

has()伪类，就是匹配某个选择器。例如：a:has(span) { color:red }​​，a 元素内的 span 标签的字体颜色设置为 red。

这就是 CSS 经常遇到的几个逻辑伪类。