CSS :has() 选择器的使用_css has选择福-CSDN博客

本文链接：https://blog.csdn.net/weixin_45658814/article/details/140815452

CSS :has() 选择器的出现，无疑为前端开发者打开了新的大门，让CSS的选择器能力大大增强，尤其是在处理复杂布局和动态内容时，提供了更多的可能性。本文将深入探讨 :has() 选择器的强大之处，并通过实际应用案例，展示其在实际开发中的应用。

:has() 选择器的基本概念

MDN 对 :has() 选择器的定义是：表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。简而言之，:has() 选择器可以根据子元素的存在来选择父元素或前面的兄弟元素，这在以往的CSS中是难以实现的。

:has() 选择器的使用场景

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

:has() 选择器可以用来选择包含特定子元素的父元素。例如，:has(p) 可以选择所有包含 <p> 元素的父元素。

.parent:has(p) {
    /* 样式 */
}

2. 选择特定范围内的元素

通过 :has() 选择器，我们可以实现对特定范围内元素的选择。例如，h2 + :has(~ h2) 可以选择紧跟着 <h2> 的并且后面还有 <h2> 元素的兄弟元素，这在实现某些特定的样式效果时非常有用。

h2 + :has(~ h2) {
    /* 样式 */
}

:has() 选择器的实际应用案例

1. 星级评分系统

<div>
  <input type="radio" name="rating" id="star1">
  <label for="star1">1 star</label>
  <!-- 其他星星 -->
</div>

input[type="radio"]:checked ~ label:has(+ input:checked) {
    /* 样式 */
}

2. 模拟 :only-of-type 选择器

<div>
  <p class="unique">Unique paragraph</p>
  <!-- 其他元素 -->
</div>

div:has(p.unique) {
    /* 样式 */
}

3. 模仿 Mac 电脑 Dock 栏效果

<div class="dock">
  <div class="icon">App 1</div>
  <div class="icon">App 2</div>
  <!-- 其他应用图标 -->
</div>

.dock:has(.icon:hover) .icon:not(:hover, :has(+ .icon:hover), .icon:hover + *) {
    /* 样式 */
}

4. 单选题的交互效果

<div class="question">
  <div class="questionHeader">Question Title</div>
  <input type="radio" name="option" data-correct="false" id="option1">
  <label for="option1">Option 1</label>
  <!-- 其他选项 -->
</div>

.question:has(input[data-correct="false"]:checked) {
  /* 标红标题 */
}

.question:has(input[data-correct="false"]:checked) input[data-correct="true"] + label {
  /* 提示动画 */
}

.question:has(input[data-correct="true"]:checked) {
  /* 标绿标题 */
}