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

昨日的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) {    


}