• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

用户头像
it1352
帮助2

问题说明

我一直在使用 :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

正确答案

#1

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.

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /reply/detail/tangibhge
系列文章
更多 icon
同类精品
更多 icon
继续加载