是否可以使用纯 CSS 选择出现在另一个 HTML 元素之后任何位置的 HTML 元素？-解网

问：

是否可以使用纯 CSS 选择出现在元素之后的任何/所有元素？<h1><h2>

我已经梳理了所有CSS选择器和伪类的文档页面，并且无法确定是否可以选择某些元素之后出现的某些元素，无论是在HTML标记的同一分支中还是在不同的分支中。

似乎选择器和伪类被设计为仅定位以下元素：

同胞
孩子
后代

我需要寻找其他关系：

侄女
侄子
堂兄弟
三表兄弟两次被移除
爷爷
等

从逻辑上讲，它们在树中的某个元素之后。我从来不知道：

确切的关系
我想选择的元素有多少。

Example 1 - Niece
<div>
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 2 - Cousin
<div>
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>

Example 3 - Granduncle
<div>
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>

HTML CSS CSS-SELECTORS XHTML 伪类

:root {
  --good-browser-support: skyblue;
  --emerging-browser-support: coral;
}

.example :has(h2)+ :is(h1, * h1) {
  /* Ancestor to sibling */
  color: var(--emerging-browser-support);
}

.example :has(h2)+* h1 {
  /* Ancestor to descendant */
  color: var(--emerging-browser-support);
}

.example h2+h1 {
  /* Subsequent siblings */
  color: var(--good-browser-support);
}

.example h2+* h1 {
  /* Nieces */
  color: var(--good-browser-support);
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

精简版：

:is(.example :has(h2)+ :is(h1, * h1), .example :has(h2)+* h1, .example h2 + h1, .example h2 + * h1) {
  color: magenta;
}

Example 1 - Niece
<div class="example">
  <h2>2</h2>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 2 - Cousin
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <div>
    <h1>1</h1>
  </div>
</div>
Example 3 - Granduncle
<div class="example">
  <div>
    <div>
      <h2>2</h2>
    </div>
  </div>
  <h1>1</h1>
</div>
Example 4 - Uncle
<div class="example">
  <div>
    <h2>2</h2>
  </div>
  <h1>1</h1>
</div>
Example 5 - Non-target: Prior Siblings
<div class="example">
  <h1>1</h1>
  <h2>2</h2>
</div>
Example 6 - Subsequent Siblings
<div class="example">
  <h2>2</h2>
  <h1>1</h1>
</div>
Example 7 - Non-target: Prior Niece
<div class="example">
  <div>
    <h1>1</h1>
  </div>
  <h2>2</h2>
</div>
Example 5 - Non-target: Prior Siblings shared parent
<div class="example">
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
</div>

是否可以使用纯 CSS 选择出现在另一个 HTML 元素之后任何位置的 HTML 元素？

Is it possible to select HTML elements which appear anywhere after another HTML element using pure CSS?

评论

评论