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) {
  /**... */
}