CSS 选择器父级元素

HenryZ 2023-11-24

有时候，某个父级元素没有特征，需要依靠子元素来定位父级元素。

css select parent element/node/tag by child elements

可使用 CSS 函数式伪类 :has() 来实现。

示例1：

<div>
	<li>
		<span class="active"></span>
	</li>
</div>

li:has(> span.active) { /* 会选择 li tag */ }
div:has(li > span.active) { /* 会选择 div tag */ }

示例2:

<h1>
  <span>title 1</span>
</h1>

<h1>
  <span>title 2</span>
</h1>
<span>text</span>

h1:has(+ span) { /* 会选择 title2 的 h1 tag */ }

其中 + span 表示紧接着 h1 后面的 tag 是一个 span tag.

CSS 选择器 父级元素