添加 :NOT 选择器到 CSS 请求

Question

我有一个 class:

li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

但如果它包含在具有 class="k-list"

的元素中，我不希望它应用

<ABC class="k-list">
    not applied here
</ABC>

如何在上面的 css 中添加 :NOT？

Answer 1

最好的方法是覆盖添加到元素的任何内容，如果它包含在具有 class .k-list:

的元素中

li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}
.k-list li:before {
  display: none;
}

如果出于某种原因，您想要确保 DOM 中的至少一个较高元素没有 class k-list（包括 html 和正文):

*:not(.k-list) li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

但是，如果您知道要从哪里开始这样的搜索，它可能会更加具体和有用：

body *:not(.k-list) li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

上面的 CSS 将排除 body 元素不包含的任何元素满足 *:not(.k-list) 条件。

Adding a :NOT selector to a CSS request