学习笔记 | 函数式伪类
发布于 # 学习笔记
CSS 伪类是添加到选择器的关键字,用于指定所选元素的特殊状态。
函数式伪类
函数式伪类的选择器都是可容错的。
在 CSS 中,当使用选择器列表时,如果任何一个选择器无效,则整个列表将被视为无效。使用这些伪类时,如果一个选择器无法解析,整个选择器列表不会被视为无效,而是会忽略不正确或不支持的选择器,并使用其他的选择器。
:is()
:is()
以选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
ul > li > a,
ol > li > a,
nav > ul > li > a,
nav > ol > li > a {
color: blue;
}
/* 使用 :is() */
:is(ul, ol, nav > ul, nav > ol) > li > a {
color: blue;
}
或者:
/* 三层或更深的无序列表使用方形符号。 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
list-style-type: square;
}
/* 处理不同层级的 h1 元素 */
/* 0 级 */
h1 {
font-size: 30px;
}
/* 1 级 */
:is(section, article, aside, nav) h1 {
font-size: 25px;
}
/* 2 级 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
font-size: 20px;
}
/* 3 级 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav)
h1 {
font-size: 15px;
}
:is()
优先级依然遵循CSS选择器的优先级规则,即 ID -> 类 -> 元素
的顺序。由它的选择器列表中优先级最高的选择器决定的。
:is()
的参数也可以传一个匹配规则:
/* 匹配所有 `class` 开头是 `is-styling` 的选择器 */
:is([class^="is-styling"]) a {
color: yellow;
}
注意,伪元素在 :is()
的选择器列表中无效。不匹配伪元素。
:not()
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为 反选伪类(negation pseudo-class)。
:where()
:where()
和 :is() 相似,都可以传入选择器或者匹配规则来简化你的CSS代码。
但和 :is() 不同的是,:where()
拥有最低优先级,这样的好处是它定义的样式规则不会影响其他样式规则,避免了样式冲突。
/* <footer class="where-styling">……</footer> */
footer a {
color: green;
}
:where([class^="where-styling"]) a {
color: red
}
当有其他规则和 :where()
同时被命中时,:where()
一定是失效的。所以上面这个例子实际效果是链接显示绿色。
:has()
:has()
表示一个元素,如果作为参数传递的任何相对选择器]在锚定到该元素时,至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。
/* 选择直接包含 p 元素的 div */
div:has(> p) {
border: 1px solid black;
}
/* 选择后面紧跟着 p 元素的 div */
div:has(+ p) {
border: 1px solid black;
}
h1,
h2,
h3 {
margin: 0 0 1rem 0;
}
:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
/* 等价于
:is(h1, h2, h3):has(+ h2, + h3, + h4) {
*/
margin: 0 0 0.25rem 0;
}