css selector

在 CSS 选择器家族中,新增这样一类比较新的选择器 -- 逻辑选择器,目前共有 4 名成员:

  • :is

  • :where

  • :not

  • :has

:is 伪类选择器

:is() CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。

在之前,对于多个不同父容器的同个子元素的一些共性样式设置,可能会出现如下 CSS 代码:

unknown
1
2
3
4
5
6
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

而如今有了 :is() 伪类,上述代码可以改写成:

unknown
1
2
3
4
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

它并没有实现某种选择器的新功能,更像是一种语法糖,只是对原有功能的重新封装设计,实现了更容易的表达一个操作的语法,简化了某些复杂代码的写法。

ps: :is 不支持伪元素

有个特例,不能用 :is() 来选取 ::before 和 ::after 两个伪元素。譬如:

注意,仅仅是不支持伪元素,伪类,譬如 :focus:hover 是支持的。

:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

:where 伪类选择器

:is 用法基本一致,唯一的区别在于:where() 的优先级总是为 0,而:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

:not 伪类选择器

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

与 :is() 类似,:not() 选择器本身不会影响选择器的优先级,它的优先级是由它的选择器列表中优先级最高的选择器决定的。

:has 伪类选择器

:has() CSS 伪类代表一个元素,其给定的选择器参数(相对于该元素的 :scope)至少匹配一个元素。

css
1
2
// 下面的选择器只会匹配直接包含 <img> 子元素的 <a> 元素:
a:has(> img)

选择器 -> 组合器

选择器 -> 属性选择器

example:

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 存在 title 属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性,且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value

[attr|=value]

表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。

[attr^=value]

表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。

[attr$=value]

表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。