CSS:has () 伪类，:not()伪类

2024-05-10 04:21:56

昨日的chrome 105更新带来了:has()和:modal的支持。

chrome更新介绍页

:has () 伪类

:has () 伪类是一个选择器，它指定一个元素，该元素至少有一个与作为参数传递的相对选择器匹配的元素。:has 伪类提供了一种将样式规则应用于特定元素的前面元素（前面的兄弟姐妹 / 祖先 / 祖先的前面的兄弟姐妹）的方法。

CSS 的 :has() 伪类选择器和 :not() 有点相似，也被称为结构性伪类选择器，在 CSS 的函数中也称之为动态伪类函数。它允许你更精细地匹配元素：

:has() 伪类代表一个元素，如果作为参数传递的任何选择器至少与一个元素相匹配！

简单地说，元素只有在传递到 :has() 中的选择器至少匹配一个元素时才会被选中。这样理解起来似乎有点晕，我们来看个简单地示例：

box img { aspect-ratio: 21 / 9; border: 5px solid #3f51b5;
}box:has(boxing) img { border: 5px solid #9c27b0;
}

上面示例中的 box img 选择器，表示选中 <box> 元素中的所有 <img> 元素；而 box:has(boxing) img 选择器表示的是选中包含了<boxing> 元素的 <box> 元素中的所有 <img> 元素。注意，这里:has() 中传了个 boxing 选择器作为其参数。

:not()伪类

:not()是CSS的一个否定伪类选择器。它是一个函数式伪类选择器，它可以将一个简单选择器（如下所示）作为参数，然后匹配一个或多个不由参数表示的元素。

能作为:not()参数的可以是以下任何一种的简单选择器，但是，传递给:not()的参数不能是伪元素选择器（例如::before和::after等）或另一个否定伪类选择器。

/* 无效 */p:not(:not(:last-child)) {}:not(::first-letter) {}a:not(::after) {}

:not()不能被嵌套，例:not(:not(..))。它还不能被嵌套在:matches()伪类中，例：selector（:matches(:not(..))）

:not()选择器将匹配其参数中未由选择器表示的元素。

例

li:not(.new) {    /* 所有样式列表项，除了具有新类的项之外*/}

将选择除具有.new类名称的列表项之外的所有列表项。

:not()选择是可链接更多的:not()选择。

box:not(#face):not(.tit) {    }

CSS:has () 伪类，:not()伪类相关推荐

css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
css伪类与伪元素区别
伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰. 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标 ...
理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
[css] CSS的伪类和伪对象有什么不同？
[css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...

最新文章

热门文章