0
点赞
收藏
分享

微信扫一扫

Vue和axios零基础学习

快乐与微笑的淘气 2024-09-29 阅读 26
css前端

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()伪类用于匹配特定文字书写方向的元素。

语法

文字方向:ltrrtl

<style>
  :dir(文字方向) {
    /**... */
  }
</style>
<div dir="ltr">hello world</div>
注意事项

:dir 不等同于[dir=...]属性选择器。后者匹配dir的值并且不会匹配的未定义此属性的元素

:lang()

lang()是用来基于元素语言匹配页面元素。

语法

language-code接收 HTML规范中指定语言的值,包括enfrde等等。

:lang(language-code) {
  /**... */
}
举报

相关推荐

0 条评论