CSS `Selector `:has()` (父选择器) (提案)：基于子元素状态选择父元素

各位靓仔靓女们，晚上好！我是今晚的CSS讲师，咱们今天的主题是——:has()，这个传说中的“父选择器”。准备好了吗？让我们开始这趟激动人心的CSS探索之旅吧！

开场白：CSS的爱恨情仇

在CSS的世界里摸爬滚打这么多年，我经常听到开发者们发出这样的呐喊：“要是CSS能像jQuery那样，根据子元素的状态去选择父元素就好了！” 过去，这只能是想想而已，因为CSS的传统选择器是单向的，只能从父到子，不能反过来。

但是！注意这个“但是”，CSS的江湖风云突变，一个强大的新特性出现了——:has()`伪类选择器！它就像一位武林高手，打破了CSS选择器的固有规则，让我们可以根据子元素的状态来选择父元素，简直是CSS界的福音啊！

:has()`：你的愿望，CSS听到了！

:has()`伪类选择器，简单来说，就是用来匹配包含特定子元素的父元素。它的语法是：

:has(selector)

其中 selector 是一个选择器列表，用于匹配子元素。如果父元素中存在符合 selector 的子元素，那么这个父元素就会被选中。

举个例子，假设我们有如下的 HTML 结构：

<div class="container">
  <p>这是一个段落。</p>
  <button>按钮</button>
</div>

<div class="container">
  <p>这是另一个段落。</p>
</div>

我们想选择包含 <button> 元素的 div.container，就可以使用 :has()` 这样写：

.container:has(button) {
  background-color: lightblue;
}

这段 CSS 代码的意思是：选择所有类名为 container 的 div 元素，并且这些 div 元素必须包含 <button> 元素，然后将它们的背景色设置为淡蓝色。

效果就是，只有第一个 div.container 的背景色会变成淡蓝色，因为它包含了 <button> 元素。

:has()` 的强大之处：案例分析

光说理论可能有点枯燥，让我们通过一些实际的例子来感受 :has()` 的强大之处。

1. 表单验证：高亮显示错误表单项

在表单验证中，我们经常需要高亮显示包含错误信息的表单项。以前，这通常需要借助 JavaScript 来实现。现在，有了 :has()`，我们可以直接用 CSS 来搞定！

<form>
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" id="name">
    <span class="error-message"></span>
  </div>

  <div class="form-group">
    <label for="email">邮箱：</label>
    <input type="email" id="email">
    <span class="error-message">邮箱格式不正确</span>
  </div>
</form>

.form-group:has(.error-message) {
  border: 1px solid red; /* 高亮显示包含错误信息的 form-group */
}

.error-message {
  color: red;
  display: none; /* 默认隐藏错误信息 */
}

/* 当input 失去焦点，且输入不合法时，显示错误信息 */
input:invalid + .error-message {
    display: block;
}

在这个例子中，.form-group:has(.error-message) 会选择包含 .error-message 元素的 div.form-group，并将其边框设置为红色，从而高亮显示包含错误信息的表单项。

2. 导航菜单：根据子菜单状态改变父菜单样式

在导航菜单中，我们经常需要根据子菜单的状态（例如，是否展开）来改变父菜单的样式。:has()` 同样可以轻松实现这个功能。

<ul class="nav">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">产品</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">关于我们</a>
  </li>
</ul>

.nav li:has(.submenu:hover) > a {
  color: blue; /* 当子菜单展开时，改变父菜单的颜色 */
}

这段 CSS 代码的意思是：当 .submenu 处于 hover 状态时，选择其父元素 li 下面的 a 元素，并将其颜色设置为蓝色。

3. 网格布局：根据内容调整列宽

在网格布局中，我们可能需要根据内容来调整列宽。例如，如果某一列的内容比较多，我们可以让它占据更多的空间。

<div class="grid">
  <div class="col">
    <h2>标题1</h2>
    <p>内容1</p>
  </div>
  <div class="col long-content">
    <h2>标题2</h2>
    <p>内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 内容2 </p>
  </div>
  <div class="col">
    <h2>标题3</h2>
    <p>内容3</p>
  </div>
</div>

.grid {
  display: flex;
}

.col {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

.grid:has(.long-content) .long-content {
  flex: 2; /* 如果存在 .long-content，则该列占据两倍的空间 */
}

在这个例子中，.grid:has(.long-content) .long-content 会选择 class 为 long-content 的元素，并将其 flex 属性设置为 2，使其占据两倍的空间。

:has()` 的进阶用法：更复杂的选择

:has()` 的强大之处不仅在于它可以选择包含特定子元素的父元素，还在于它可以与其他选择器组合使用，实现更复杂的选择。

1. 选择包含多个特定子元素的父元素

我们可以使用多个选择器来匹配多个子元素。例如，要选择同时包含 <button> 和 <a> 元素的 div 元素，可以这样写：

div:has(button, a) {
  /* 样式 */
}

2. 使用 :not() 排除特定子元素

我们可以使用 :not() 伪类来排除包含特定子元素的父元素。例如，要选择不包含 <button> 元素的 div 元素，可以这样写：

div:not(:has(button)) {
  /* 样式 */
}

3. 结合其他伪类选择器

:has()可以与其他伪类选择器结合使用，例如:hover、:active` 等，实现更丰富的交互效果。

a:hover:has(+ .submenu) {
  /* 当鼠标悬停在包含子菜单的链接上时，改变链接的样式 */
}

:has()` 的兼容性：时代的眼泪？

虽然 :has()非常强大，但是它的兼容性却不容乐观。截至目前（2024-02-29），主要浏览器对:has() 的支持情况如下：

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Opera	支持
IE	不支持

也就是说，如果你需要兼容 IE 浏览器，那么 :has()` 就暂时与你无缘了。

:has()` 的性能：需要注意的地方

虽然 :has()功能强大，但是它的性能也是一个需要注意的问题。因为:has() 需要遍历 DOM 树来查找匹配的子元素，所以当 DOM 结构比较复杂时，可能会影响页面的性能。

因此，在使用 :has()` 时，我们需要尽量避免过度使用，并尽量使用更具体的选择器来缩小查找范围。

:has()` 的替代方案：JavaScript 依然是好朋友

如果你的项目需要兼容不支持 :has()的浏览器，或者你担心:has() 的性能问题，那么 JavaScript 依然是你的好朋友。

你可以使用 JavaScript 来监听 DOM 元素的事件（例如，mouseover、mouseout、click 等），然后根据子元素的状态来改变父元素的样式。

虽然使用 JavaScript 需要编写更多的代码，但是它可以提供更好的兼容性和更灵活的控制。

:has()` 的未来：值得期待！

虽然 :has()` 目前的兼容性还不够完美，但是随着浏览器的不断更新，相信在不久的将来，它会得到更广泛的支持。

:has()` 的出现，极大地增强了 CSS 的选择能力，让我们可以用更少的代码来实现更复杂的效果。它代表了 CSS 的未来发展方向，值得我们期待！

总结：:has()`，让CSS更上一层楼

总的来说，:has()` 伪类选择器是一个非常强大的 CSS 特性，它可以让我们根据子元素的状态来选择父元素，从而实现更复杂的布局和交互效果。

虽然它的兼容性和性能还需要进一步优化，但是它依然是一个值得我们学习和使用的 CSS 特性。

希望今天的讲座能够帮助你更好地理解和使用 :has()`。记住，CSS 的世界是充满惊喜的，让我们一起探索，一起进步！

附录：:has()` 的一些注意事项

:has()可以嵌套使用，例如div:has(> ul:has(> li))`。
:has()可以与:scope` 伪类结合使用，限制选择器的范围。
:has()` 不支持使用变量。
:has()` 的性能可能会受到 DOM 结构的影响，需要谨慎使用。

好了，今天的讲座就到这里，谢谢大家！如果有什么问题，欢迎随时提问。祝大家编程愉快！

发表回复 取消回复

发表回复取消回复