#书摘 #css #前端《CSS 选择器世界》不容小觑的逻辑组合伪类标签选择器、属性选择器直接匹配元素，树结构伪类通过DOM结构进行匹配，而本章要介绍的伪类则通过逻辑进行匹配，这进一步增强了CSS选择器对HTML元素匹配的能力

#书摘 #css #前端
《CSS 选择器世界》不容小觑的逻辑组合伪类

标签选择器、属性选择器直接匹配元素，树结构伪类通过DOM结构进行匹配，而本章要介绍的伪类则通过逻辑进行匹配，这进一步增强了CSS选择器对HTML元素匹配的能力。

目前CSS中的逻辑组合伪类主要有4个，分别是 :not() 、`:is()` 、`:where()` 和 :has() 。这4个伪类自身的优先级都是0，当伪类选择器自身和括号里的参数作为一个整体时，整个选择器的优先级各有差异，有的由参数选择器决定，如:not()，有的参数选择器的优先级也是0，如:where()。

:not()伪类从IE9浏览器就开始支持，非常实用，务必掌握。其他3个伪类适用于无须兼容IE浏览器的项目，其中的:has()伪类是一个功能强大的伪类，可以实现类似于父选择器的效果，日后定是个“大杀器”，大家一定要重点关注。现在先从:not()伪类说起

1. :not() 是否定伪类，如果当前元素与括号里的选择器不匹配，则该伪类会进行匹配。:not()伪类其他相关细节如下。
- :not( 伪类的优先级是0，即最终选择器的优先级是由括号里的表达式决定的。例如 :not(p) {} 的优先级就是p选择器的优先级。
- :not( 伪类可以不断级联。例如：

input:not(:disabled):not(:read-only) {}

表示匹配所有不处于禁用状态也不处于只读状态的 <input> 元素。
- 从2021年开始，所有现代浏览器均已支持在:not()伪类中使用多个表达式，例如下面这种写法是合法的：

/* 现代浏览器均支持 */
.cs-li:not(li, dd) {}

但是在过去，浏览器是无法解析上述用法的，需要使用下面这种冗长的写法代替：

.cs-li:not(li):not(dd) {}

在过去，下面几种写法也不支持，但是现在没有这个限制了，只要项目无须兼容IE浏览器，就可以放心使用。

/* 过去不支持，现在均支持 */
input:not(:disabled:read-only) {}
input:not(p:read-only) {}
input:not([id][title]) {}

此外，`:not()` 伪类的参数值不仅可以是选择器，还支持选择符。例如下面的语句也是可以被现代浏览器解析的：

/* 现代浏览器均支持 */
input:not(.a > .b) { border: red solid; }

2. 告别重置，全部交给:not()伪类
:not()伪类的最大用处就是可以优化过去我们重置CSS样式的策略。由于重置样式在Web开发中非常常见，因此:not()伪类的适用场景非常广泛。例如：

.cs-panel {
   display: none;
}
.cs-panel.active {
   display: block;
}

实际上，这种效果有更好的实现方式，那就是使用:not()伪类，推荐使用下面的CSS代码：

.cs-panel:not(.active) {
   display: none;
}

使用:not()伪类有如下优点。
(1)使代码更简洁。
(2)更易于理解。
(3)最重要的是**保护了原类名的优先级，扩展性更强**，更利于维护。

对于某类重置场景，如果:not()伪类使用不当，可能会有预料之外的情况出现。例如，对于一些阅读类的网站，希望 <article> 元素内的 <ol>`、 `<ul> 元素依然保留默认的样式，不希望被重置。传统的实现一般是外部CSS重置，在 <article> 元素里再还原，CSS示意代码如下：

ol, ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
article ol,
article ul {
  all: revert;
}

有些读者学了本节的内容后会想到使用:not()伪类来实现，然后使用了如下的CSS代码：

:not(article) ol,
:not(article) ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

实际上这是有问题的。例如，有如下HTML代码：

<article>
  <div>
    <ol>
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
    </ol>
 </div>
</article>

这里的 <ol> 元素的margin和padding等CSS属性样式理论上不应该被重置，但实际上这些样式都被重置了，因为 <ol> 元素外面的 <div> 元素也匹配 :not(article) ol 选择器。

所以，对于这种场景，:not()伪类的使用并没有想象的那么简单，不过也不是不能实现，而是需要使用:not()伪类在CSS选择器Level4规范中的新语法，也就是使用选择符：

ol:not(article ol),
ul:not(article ul) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

上面的例子有演示页面，读者可以通过链接https://demo.cssworld.cn/selector2/9/1-1.php 访问。

https://memo.cosine.ren/m/357

demo.cssworld.cn

article标签内的ol, ul样式不重置 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 article标签内的ol, ul样式不重置