首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:not

否定 CSS伪类,:not(X)接受一个简单选择器作为参数。它匹配所有不由参数所表示的元素。X不能包含另一个否定选择器。X也可能不以一个伪元素为目标。

代码语言:javascript
复制
/* Selects any element that is NOT a paragraph */
body :not(p) {
  color: blue;
}

笔记:

  • 无用的选择器可以使用这个伪类来编写。例如,:not(*)匹配任何不是任何元素的元素,所以规则永远不会被应用。
  • 重写其他规则是可能的。例如,.foo:not(.bar)将匹配与.foo相同的元素。不过,第一个的特异性更高。
  • :not(.foo)将匹配任何不是.foo的元素,包括<html> <body>
  • 此选择器仅适用于一个元素;您不能使用它排除所有祖先。例如,body :not(table) a将仍然适用于表中的链接,因为<tr>将与:not()选择器的一部分。

句法

代码语言:javascript
复制
:not( <selector># )

HTML

代码语言:javascript
复制
<p>This is a boring paragraph.</p>
<p class="shiny">I am so very shiny!</p>
<div>It ain't easy being green.</div>

CSS

代码语言:javascript
复制
.shiny { text-shadow: 1px 1px 2px gold; }

/* Selects all <p> elements that are not in the class .shiny */
p:not(.shiny) { color: red; }

/* Selects all elements that are not <p> */ 
:not(p) { color: green; }

结果

规范

Specification

Status

Comment

Selectors Level 4The definition of ':not()' in that specification.

Working Draft

Extends its argument to allow some non-simple selectors.

Selectors Level 3The definition of ':not()' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

(Yes)

1.0 (1.7 or earlier)

9.0

9.5

3.2

Extended arguments

No support

No support

No support

No support

No support

9.0

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

2.1

(Yes)

1.0 (1)

9.0

10.0

3.2

Extended arguments

No support

No support

No support

No support

No support

9.0

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com