Question

我认为这是一个直接使用：not（）伪类，但它似乎在大多数浏览器中都不起作用，所以我对它做了一个codepen。

.YYY:not(.ZZZ .YYY) {}

更新

需要css规则以下the的解决方案

.YYY:not(.AAA + .YYY) {}

Answer 1

这是我收集的内容，如果我误解了某些内容，有人会纠正我。

TLDR ：根据规范，:not(X)接受简单选择器作为参数，它与简单选择器序列不同。因此，它甚至不应该工作，Safari只是违反规范。

规格：https://drafts.csswg.org/selectors-3/#negation

否定伪类，不是（X），是一个函数符号，它将一个简单的选择器（不包括否定伪类本身）作为一个参数。

规格：https://drafts.csswg.org/selectors-3/#simple-selectors-dfn

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

组合符是：空格，＆＃34;大于号＆＃34; （U + 003E，＆gt;），＆＃34;加号＆＃34; （U + 002B，+）和＆＃34;代字号＆＃34; （U + 007E，〜）。组合器与其周围的简单选择器之间可能出现空白区域。只有角色＆＃34;空间＆＃34; （U + 0020），＆＃34; tab＆＃34; （U + 0009），＆＃34;换行＆＃34; （U + 000A），＆＃34;回车＆＃34; （U + 000D），＆＃34;形成饲料＆＃34; （U + 000C）可以在空白区域内发生。其他类似空间的角色，例如＆＃34; em-space＆＃34; （U + 2003）和＆＃34;表意空间＆＃34; （U + 3000），永远不会是空白的一部分。

由选择器表示的文档树的元素是选择器的主题。由单个简单选择器序列组成的选择器表示满足其要求的任何元素。在序列中添加另一个简单选择器和组合子序列会产生额外的匹配约束，因此选择器的主体始终是由最后一个简单选择器序列表示的元素的子集。

注意谈论简单选择器和简单选择器序列之间的区别。

规格：https://drafts.csswg.org/selectors-3/#changesFromCSS2

基本定义列表（选择器，选择器组，简单选择器等）已更改;特别是，在CSS2中称为简单选择器的内容现在被称为简单选择器序列，而术语＆＃34;简单选择器＆＃34;现在用于此序列的组件

Answer 2

或者你可以使用这个用于此目的的css规则

.YYY {
  font-size: 24px;
  text-align: center;
}

 *:not(.ZZZ) > .YYY {
  color:red;
}

以下是codepen link

Answer 3

根据CSSWG draft，否定伪类接受简单选择器作为其参数。

选择器是一个或多个简单选择器序列的链   由组合器分开。一个伪元素可以附加到   选择器中最后一个简单选择器序列。

简单选择器序列是一系列简单选择器   未被组合器分开。它始终以类型选择器开头   或通用选择器。没有其他类型选择器或通用选择器   在序列中被允许。

简单选择器是类型选择器，通用选择器，   属性选择器，类选择器，ID选择器或伪类。

.ZZZ .YYY是一个选择器，但不是一个简单的选择器，所以不支持将它用作否定伪类的参数。虽然Safari等一些浏览器可能会支持它，但我们不应指望它。

：not（）伪类示例仅适用于Safari

3 个答案: