css伪类选择器系列一
# 概述
本文主要讲述CSS
的部分伪类选择器,包括::not
、:is
、:where
、:has
、:dir
和:lang
。
# :not()
:not()
用来匹配不符合一组选择器的元素,防止特定的元素被选中
# 语法
:not()
伪类可以将一个或多个选择器以逗号分隔作为参数选择器参数不能包含伪元素,且
:not()
不支持嵌套
:not(selector1, selector2) {
/** ... */
}
1
2
3
2
3
# 注意事项
:not()
的参数选择器如果其中有一个是无效或者浏览器不支持,则整个规则都将无效:not()
伪类的优先级由其参数选择器中优先级最高的选择器决定:not()
可以提高规则的优先级,即#foo:not(.bar)
的选择器优先级高于#foo
# :is()
:is()
和:not()
相反,用于匹配一组选择器中的任意一个元素,可以简化CSS
的编写。
:is()
的前身是:matches()
以及:any()
,后面被重命名为:is()
。
# 语法
:is()
伪类同样可以将一个或多个选择器以逗号分隔作为参数:is()
的选择器参数不能包含伪元素
:is(selector1, selector2) {
/** ... */
}
1
2
3
2
3
# 注意事项
:is()
会计入整个选择器的优先级,即会采用其最具体参数的优先级,并且类选择器的优先级高于元素选择器。这点和:where
不同:is()
有容错解析的能力,如果其参数选择器组其中有选择器无效,那么该选择器会被忽略,会解析其它正确有效的选择器
# :where()
:where
和:is()
作用一样,区别就是:where()
中的选择器的优先级是 0.
# :has()
:has()
表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素。
# 语法
:has()
同样地,也可以接受一组选择器作为参数,同时也拥有容错解析能力
:has(selector1, selector2) {
/** ... */
}
1
2
3
2
3
# 注意事项
:has()
伪类地优先级计算方法同:is()
、:not()
相同,以其参数中具体地选择器进行计算:has()
不能嵌套使用,其参数也不能是伪元素
# :dir()
:dir()
伪类用于匹配特定文字书写方向的元素。
# 语法
文字方向:ltr
或rtl
<style>
:dir(文字方向) {
/**... */
}
</style>
<div dir="ltr">hello world</div>
1
2
3
4
5
6
2
3
4
5
6
# 注意事项
:dir
不等同于[dir=...]
属性选择器。后者匹配dir
的值并且不会匹配的未定义此属性的元素
# :lang()
lang()
是用来基于元素语言匹配页面元素。
# 语法
language-code
接收 HTML
规范中指定语言的值,包括en
、fr
、de
等等。
:lang(language-code) {
/**... */
}
1
2
3
2
3
编辑 (opens new window)
上次更新: 2024/09/23, 07:01:13