css3 :not([class]) css3 :not([style])

最新推荐文章于 2023-12-05 15:01:36 发布

Embrace924

最新推荐文章于 2023-12-05 15:01:36 发布

阅读量3.8k

点赞数 2

分类专栏： css 文章标签： css3 css html

本文链接：https://blog.csdn.net/Embrace924/article/details/122944616

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

/* 选择所有不是段落（p）的元素 */
:not(p) {
  color: blue;
}

注意：

:not() 伪类不能被嵌套，这意味着 :not(:not(...)) 是无效的。
由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作。
可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。
:not(.foo) 将匹配任何非 .foo 的元素，包括 <html> 和 <body>。
这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 <table> 内部的 <a> 上, 因为 <tr>将会被 :not(table) 这部分选择器匹配。

这是一个坑，很容易入“只会应用在一个元素上，无法用它来排除所有父元素”，非常用的思维惯性

一般使用的时候，想当然的认为，div:not(.name) tr{} 表示父级没有.name的class元素下面的tr才使用该样式。实则不是的，.name 和非.name 下的tr 都会使用上该样式。

table:not([class]):表示table元素没有class属性的
table:not([style]):表示table元素没有style属性的

常用示例：

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

.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` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

结果：