第七篇 伪类选择器之反选伪类、:is伪类与:where伪类

145 阅读3分钟

:where()伪类

语法

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

选择器列表是由多个选择器以逗号作为分隔符的列表。

优先级【特指度】

优先级为0

该伪类的特殊选择器列表

在 CSS 中使用选择器列表时,如果任何选择器无效,则整个列表被视为无效。当使用 :is() 或 :where() 而不是整个选择器列表时,如果某个选择器无法解析,则被视为无效,不正确或不受支持的选择器将被忽略,其他选择器将被使用。

image.png

:is()伪类

语法

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

该处的选择器列表和where的选择器列表都是一样的性质,都是特殊的。我们将这种特殊的选择器列表称为可容错选择器列表

与where伪类的区别【特指度】

:where() 的特指度总是为 0,但是 :is() 的特指度是由它的选择器列表中特指度最高的选择器决定的。

cookbook

:is() 伪类可以大大简化 CSS 选择器。例如,下面的 CSS:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

你可以将其替换为:

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

反选伪类:not(选择器列表)

语法

选择器列表是由多个选择器以逗号作为分隔符的列表。

顾名思义,该伪类会将括号中的选择器列表中的所有选择器都选不中的元素选中。 例如::not(.foo, .bar) 等同于 :not(.foo):not(.bar)

优先级确定

:not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定。

COOKBOOK与注意事项

  • 【重要】 该伪类选择器中不得包含另一个否定选择器或伪元素。
  • 可以利用这个伪类提高规则的优先级。例如,#foo:not(#bar) 和 #foo 都将匹配相同的元素,但是具有两个 id 的选择器具有更高的优先级。
  • :not(.foo) 将匹配任何非 .foo 的元素,包括 <html>和 <body>
  • 【重要】 当与后代选择器【空格】一起使用,可能出现一些超出预料的结果。例如,body :not(table) a 仍将应用 <table> 中的链接,因为 <tr><tbody><th><td><caption> 等<table>的子元素都可以匹配 :not(table) 。
  • 【重要】 如果传递给 :not() 伪类的选择器无效或者浏览器不支持,则整个规则都将是无效的。使用::is伪类解决此问题。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效,但是 :is(:not(.foo), :not(:invalid-pseudo-class)) 。因为is伪类将会选中任何和选择器列表中的任意选择器匹配的元素,哪怕这个选择器是无效的,也不会影响is伪类本身,所以该选择器将匹配任何不是 .foo 的元素。