CSS

CSS - 否定伪类 :not( X )

笔记

Posted by Wason on November 16, 2019

CSS知识点

否定伪类 :not( X )

  1. X 指的是参数选择器,它不能包含另外一个否定选择器
  2. :not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级。
  3. 下面是参考例子
---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;
}