利用 :has() 实现父级样式控制

CSS 中的伪类 :has() 是一个非常强大的工具，它可以让父级元素根据子级元素的状态动态调整样式，从而减少 JavaScript 的依赖。

场景：根据子元素的状态改变父元素样式

传统方式（需要 JS）：

<div class="card">
  <input type="checkbox" class="checkbox" />
  <p>Card Content</p>
</div>

.card.checked {
  background-color: lightblue;
}

const checkbox = document.querySelector('.checkbox');
checkbox.addEventListener('change', (e) => {
  const card = e.target.closest('.card');
  if (e.target.checked) {
    card.classList.add('checked');
  } else {
    card.classList.remove('checked');
  }
});

使用 :has()（纯 CSS 实现）：

<div class="card">
  <input type="checkbox" class="checkbox" />
  <p>Card Content</p>
</div>

.card:has(.checkbox:checked) {
  background-color: lightblue;
}

优点：完全不需要 JavaScript，也减少了 DOM 操作和状态同步的复杂性。

更多应用场景

1. 表单验证

<form class="form">
  <input type="text" required />
  <button type="submit">Submit</button>
</form>

.form:has(input:invalid) button {
  background-color: grey;
  pointer-events: none;
}

效果：如果表单中的输入框无效，提交按钮会变灰且不可点击。

2. 导航栏选中状态

<nav class="nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about" class="active">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

.nav:has(a.active) {
  border-bottom: 2px solid blue;
}

效果：导航栏的父级在子元素有 .active 的链接时添加样式。

注意事项

1. :has() 目前已被大多数现代浏览器支持，但仍需要注意兼容性，特别是旧版 Safari 和 IE。
2. :has() 是动态的，会根据 DOM 的变化实时更新样式。