伪类选择器

:is( ) 选择器，它可以将多个选择器组合在一起，简化代码。

//原代码:每种列表类型 (ul 和 ol) 单独编写选择器
ul li a,ol li a {
  color:red;
}

//精简代码：is(ul, ol) 匹配 ul 或 ol 元素，这样你只需要写一次 a 选择器，就可以应用相同的样式。
:is(ul,ol) a {
  color:red;
}

:where( )选择器，是没有特定权重的选择器。不会影响选择器的优先级（Specificity）。

//原代码:这种写法需要为每个元素类型分别指定样式。
main h1, main h2, main h3 {
  color:blue;
}

//精简代码:它类似于 :is() 伪类，但不同之处在于 :where() 是没有特定权重的选择器。
main :where(h1,h2,h3){
  color:blue;
}

:not( ) 选择器，用于选择不匹配指定选择器的元素。

示例1:排除某个类

//原代码:
<button>Button 1</button>
<button class="test">Button 2</button>
<button>Button 3</button>

//CSS:除了special类名的button的样式
button:not(.test) {
  background-color: blue;
  color: white;
}
示例2:排除某个属性

//原代码:
<button>Submit</button>
<button disabled>Disabled Button</button>
<button>Reset</button>

//CSS:给所有按钮应用样式，但不希望给禁用的按钮应用该样式。
button:not([disabled]) {
  background-color: green;
  color: white;
}

:has( ) 选择器，用于选择包含特定子元素的父元素。

示例1:为包含图片的div添加样式

//原代码:
<div class="container">
  <div class="box">No image here</div>
  <div class="box"><img src="image.jpg" alt="An image"></div>
  <div class="box">Just text here</div>
</div>

//CSS:所有包含img标签的div背景颜色变为黄色。
.box:has(img) {
  background-color: yellow;
}
示例1:为包含特定表单元素的form添加样式

//原代码:
<form class="signup-form">
  <input type="text" name="username" placeholder="Username">
</form>

<form class="contact-form">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
</form>


//CSS:所有包含input[type="email"]的表单有一个特殊的边框。
form:has(input[type="email"]) {
  border: 2px solid green;
}

前端JS框架