:not() 否定是否接受后代选择器?

问题描述

我一直在使用 :not() 伪类来设置样式，而无需使用第二个不必要的声明来撤消第一个声明来覆盖它，但现在我遇到了一个奇怪的行为，Safari 接受 :not() 中的后代选择器，但 Chrome 不接受.

I've been using the :not() pseudo-class to style things without the need to override it with a second unnecessary declaration to undo the first one, but now I came across a weird behaviour where Safari accepts descendant selectors within the :not(), but Chrome doesn't.

我使用了类似 a:not(.blue a).

我搜索了答案，但我仍然不完全理解原因.规范真的允许后代选择器吗?

I searched for answers, but I still don't fully understand the reason.
Are descendant selectors really allowed by the spec?

这是一个演示:

a:not(.blue a) {
  color: red;
}

<div><a>this one should be in red</a></div>
<div class="blue"><a>this one shouldn't</a></div>

http://codepen.io/oscarmarcelo/pen/YqboQJ?editors=1100

推荐答案

在 Selectors Level3，答案是否定的.:not() 表示法只接受 简单的选择器.

In Selectors Level 3, the answer would be NO. The :not() notation accepts only simple selectors.

6.6.7.否定伪类

否定伪类:not(X)是一个函数式记号简单选择器(不包括否定伪类本身)作为争论.它表示一个元素，它没有被它的论据.

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.

什么是简单选择器?

来自选择器语法:

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

与后代选择器无关.

但是，在 选择器级别4，:not() 接受复杂选择器，其中包括后代组合器.浏览器对该规范的支持仍然很弱.

HOWEVER, in Selectors Level 4, :not() accepts complex selectors, which would include descendant combinators. Browser support is still quite weak for this specification.

这篇关于:not() 否定是否接受后代选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！