We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

CSS 否定伪类,:not(X),是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。

:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级。

注意:

  • 可以利用这个伪类写一个完全没有用处的选择器。例如, :not(*) 匹配任何非元素的元素,因此这个规则将永远不会被应用。
  • 可以利用这个伪类提高规则的优先级。例如, #foo:not(#bar)#foo 会匹配相同的元素。 但是前者的优先级更高。
  • :not(foo) 将匹配任何非foo元素,包括html和body。
  • 这个选择器只会应用在一个元素上,你无法用它排除所有父元素。比如, body :not(table) a 将依旧会应用在table内部的<a> 上, 因为 <tr>将会被 :not()这部分选择器匹配。

语法

:not() 伪类可以将一个或多个以逗号分隔的选择器作为其参数。选择器中不得包含另一个否定选择符或伪元素。

以多个以逗号分隔的选择器作为参数是实验性的,尚未广泛支持。

:not( <selector># )
:not(selector) { CSS样式 }

例子

HTML

<p>我是一个段落。</p>
<p class="fancy">我好看极了!</p>
<div>我不是一个段落。</div>

CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */ 
body :not(p) {
  text-decoration: underline;
}

/* 非 <div> 或 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 类名不是 `.crazy` or `.fancy` 的元素 */
/* 注意,此语法尚未被较好地支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

结果

规范

规范 状态 备注
Selectors Level 4
:not()
Working Draft 拓展标准,以允许使用一些复杂的选择器。
Selectors Level 3
:not()
Recommendation 初始定义。

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes199.53.2
Selector list argument No No No No No9
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 ? Yes4103.2 ?
Selector list argument No No No No No9 No

文档标签和贡献者

此页面的贡献者: RainSlide, ly525, nick-ChenZe, FredWe
最后编辑者: RainSlide,