CSS中是否存在父选择器的探讨

CSS中是否存在父选择器的探讨

技术背景

在网页开发中，CSS 用于为 HTML 元素添加样式。常规的 CSS 选择器大多是从父元素向子元素进行选择，例如 div p 可以选择 div 元素内的所有 p 元素。然而，在某些场景下，开发者可能需要根据子元素的状态来选择并样式化其父元素。比如，当导航菜单中的链接被激活时，希望改变其父列表项的样式。但在早期的 CSS 版本中，并没有直接的父选择器来满足这样的需求。

实现步骤

1. 使用 :has() 伪类（CSS Selectors Level 4）

• 原理：:has() 伪类是 CSS Selectors Level 4 中的一个新特性，它允许根据元素的子元素或兄弟元素来选择该元素。
• 示例代码：

li:has(> a.active) {
   
  /* 应用于 li 标签的样式 */
  background-color: lightblue;
}

<ul>
  <li><a href="#">普通链接</a></li>
  <li><a href="#" class="active">激活链接</a></li>