7个让你眼前一亮的CSS选择器！

1. :is()

mdn: CSS 伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用

备注： 最初该选择器被命名为 :matches()（以及 :any()），但在 CSSWG issue #3258 中被重命名为 :is()

选中header main footer中的所有段落并绑定hover状态:

header p:hover,
main p:hover,
footer p:hover {
  color: red;
}

使用 :is() 可以简化成以下写法：

:is(header, main, footer) p:hover {
  color: red;
}

2. :where()

mdn: CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素

用法：

选中header main footer中的所有段落并绑定hover状态:

header p:hover,
main p:hover,
footer p:hover {
  color: red;
}

使用 :where() 可以简化成以下写法:

:where(header, main, footer) p:hover {
  color: red;
}

是不是感觉:is()和:where()的用法一模一样？

:is()和:where()的用法和作用是很相似的，唯一不同的在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的

3. :not()

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

用法：

我是一个段落。
我非常非常喜欢！
我不是一个段落。

  foo 在 h2 里面
  bar 在 h2 里面

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

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

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

/* 既不是 
 也不是  的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 不是 
 或 `.fancy` 的元素*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* 
 元素中不是有 `.foo` 类名的  元素 */
h2 :not(span.foo) {
  color: red;
}

4. :only-child

:only-child CSS 伪类表示没有任何兄弟元素的元素。这与 :first-child、:last-child 或 :nth-child(1)、:nth-last-child(1) 相同，但前者具有更小的权重性。

用法

  
今天天气晴朗，是个敲代码的好日子



  
今天天气晴朗，是个敲代码的好日子
  
但是写了很多bug.
  
这很让我头疼.

li:only-child {
  color: fuchsia;
}

b:only-child {
  text-decoration: underline;
}

5. :root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。

用法:

你可以使用:root选择器定义一个变量--main-bg-color，并在任意一个选择器中使用var来调用--main-bg-color

:root {
  --main-bg-color: lightgreen;
}
.main {
  background: var(--main-bg-color);
}

6. :empty

:empty CSS伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content不会影响元素是否被认定为空。

用法：

下面的节点没有内容

下面的节点有空的标签

  
123456


下面的节点有注释


下面的节点有空格
 

下面的节点有空的标签

  

div:empty {
  outline: 2px solid deeppink;
  height: 1em;
  width: 100px;
}

7. :invalid

:invalid 是 CSS伪类选择器，用来选择任何未通过验证的

、

、或其他表单元素。

    姓名
    
    提交

form:invalid > button {
  opacity: 0.3;
  pointer-events: none;
}

填入内容前/后的效果对比：

本文由mdnice多平台发布