不使用 not() 得到更简洁的CSS选择器 - 具体应用场景有哪些？

8 min read

not()是CSS中常用的一个逻辑关键词，可以用于选择器中的过滤，表示取反操作。

以下是not()的使用场景举例：

  1. 使用:not()去除某个元素的样式

例如，要去除所有p元素中带有class="highlight"的样式，可以使用如下代码：

p:not(.highlight) {
  /* 这里写上其他样式 */
}

意思是：选择所有不带class="highlight"的p元素，应用其他样式。

  1. 嵌套使用not()，筛选出不包含某个元素的元素

例如，要筛选出所有没有ul子元素的li元素，可以使用如下代码：

li:not(:has(ul)) {
  /* 这里写上其他样式 */
}

意思是：选择所有没有包含ul子元素的li元素，应用其他样式。

  1. 使用:not()筛选出除了某种元素以外的其他元素

例如，要筛选出除了图片以外的所有元素，可以使用如下代码：

:not(img) {
  /* 这里写上其他样式 */
}

意思是：选择除了img元素以外的其他所有元素，应用其他样式。

希望以上举例能够帮助您更好地理解和应用not()。