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