[CSS] 伪类 :not( ), :is( ), :has( ), :where( )

概述

W3C 的CSS 值和单位模块 Level 4因此，一些关于伪类的规范已经改变。

此更改为伪类添加了许多伪类，例如論理的な組み合せ、属性セレクタ、自然言語に関する擬似クラス。

因此，在本文中，我们将解释:not()、:is()、:has()和:where()，它们是已添加的逻辑组合的伪类。

负伪类:not( )

否定伪类:not( ) 是一个功能性伪类，表示与枚举选择器不匹配的元素。

基本语法

指定类名样式中不是p标签的事物的样式。

.style:not(p) {

}

使用:not() 时，请注意以下情况：

• 不能嵌套负伪类。
  • 示例）❌:not(:not(...))
• 当使用否定伪类时，你可以写废话。
  • 示例）:not(*) → 样式不变
• 负伪类更具体。
  • 示例）#foo:not(#bar) 比 #foo 更详细。
• :not(.foo) 选择所有不是.foo 的元素
  • 示例）html 和 body 也将被选中。

样本

见笔伪类by 德谷 | 奇塔 (@sp_degu) 上代码笔.

浏览器兼容性

析取伪类:is( )

析取伪类:is( ) 是一个类似函数的伪类，它指示匹配任何一个枚举选择器的元素。
与:where( ) 的区别在于:where( ) 的详细程度为0，而:is( ) 的详细程度很重要。

基本语法

header main footer P-tag 悬停风格

:is(header, main, footer) p:hover {

}

样本

见笔无标题by 德谷 | 奇塔 (@sp_degu) 上代码笔.

浏览器兼容性

粒度调整伪类:where( )

特异性调整伪类:where( ) 是一个类似函数的伪类，它指示与枚举选择器之一匹配的元素。
与:is( ) 的区别在于:where( ) 的详细程度为0，而:is( ) 的详细程度很重要。

基本语法

headermainfooterP 标签悬停风格

:where(header, main, footer) p:hover {

}

样本

见笔不同的by 德谷 | 奇塔 (@sp_degu) 上代码笔.

浏览器兼容性

关系伪类:has( )

关系伪类:has( ) 是一个功能性伪类，表示存在一个或多个与枚举选择器匹配的元素。

基本语法

指定类名为 style 且包含 p 标记的事物的样式。

.style:has(p) {

}

样本

看笔在哪里by 德谷 | 奇塔 (@sp_degu) 上代码笔.

浏览器兼容性

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308622540.html