前端记事本-工具盒子

伪类选择器 {#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8}

:is( ) 选择器，它可以将多个选择器组合在一起，简化代码。 {#%3Ais(-)-%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E5%AE%83%E5%8F%AF%E4%BB%A5%E5%B0%86%E5%A4%9A%E4%B8%AA%E9%80%89%E6%8B%A9%E5%99%A8%E7%BB%84%E5%90%88%E5%9C%A8%E4%B8%80%E8%B5%B7%EF%BC%8C%E7%AE%80%E5%8C%96%E4%BB%A3%E7%A0%81%E3%80%82}

简化代码：减少重复，选择器更简洁。
提高可读性：让样式更容易理解和维护。

//原代码:每种列表类型 (ul 和 ol) 单独编写选择器 ul li a,ol li a { color:red; } //精简代码：is(ul, ol) 匹配 ul 或 ol 元素，这样你只需要写一次 a 选择器，就可以应用相同的样式。 :is(ul,ol) a { color:red; }

:where( )选择器，是没有特定权重的选择器。不会影响选择器的优先级（Specificity）。 {#%3Awhere(-)%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E6%98%AF%E6%B2%A1%E6%9C%89%E7%89%B9%E5%AE%9A%E6%9D%83%E9%87%8D%E7%9A%84%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82%E4%B8%8D%E4%BC%9A%E5%BD%B1%E5%93%8D%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%EF%BC%88specificity%EF%BC%89%E3%80%82}

简化代码：使用 :where() 或 :is() 可以减少重复，写起来更加简洁。
提升可读性：CSS 规则变得更加直观和易于理解。

//原代码:这种写法需要为每个元素类型分别指定样式。 main h1, main h2, main h3 { color:blue; } //精简代码:它类似于 :is() 伪类，但不同之处在于 :where() 是没有特定权重的选择器。 main :where(h1,h2,h3){ color:blue; }

:not( ) 选择器，用于选择不匹配指定选择器的元素。 {#%3Anot(-)-%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E7%94%A8%E4%BA%8E%E9%80%89%E6%8B%A9%E4%B8%8D%E5%8C%B9%E9%85%8D%E6%8C%87%E5%AE%9A%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82}

"排除"法则：:not() 选择器就是一种"排除"的逻辑。它选择某种元素，但不包括那些符合特定条件的元素。
多种条件：你可以在 :not() 内使用任何 CSS 选择器，包括类名、属性选择器、伪类等，以非常灵活地定义排除条件。

示例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( ) 选择器，用于选择包含特定子元素的父元素。 {#%3Ahas(-)-%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%8C%E7%94%A8%E4%BA%8E%E9%80%89%E6%8B%A9%E5%8C%85%E5%90%AB%E7%89%B9%E5%AE%9A%E5%AD%90%E5%85%83%E7%B4%A0%E7%9A%84%E7%88%B6%E5%85%83%E7%B4%A0%E3%80%82}

"包含"法则：:has() 选择器是一种"包含"逻辑。它选择那些包含特定子元素的父元素。
动态样式：: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;
}