元素父级的第一个兄弟姐妹有CSS选择器吗？

Question

如何在此处选择<p>元素？ 我唯一的常数是ID“ Standort”。

有什么想法吗？

<section>
  <header>
    <h2 class="licht"><span id="Standort" class="-sitemap-select-item-selected">Standort</span></h2>
  </header>
  <p>Lorem ipsum</p>
</section>

Answer 1

您可以使用adjacent sibling combinator：

header+p {
  color: red;
}

<section>
  <header>
    <h2 class="licht"><span id="Standort" class="-sitemap-select-item-selected">Standort</span></h2>
  </header>
  <p>Lorem ipsum</p>
</section>

---

如果您只能基于header中包含的子元素的ID，那么就没有纯CSS解决方案，而您将不得不依靠JavaScript：

document.getElementById('Standort')
  .closest('header')
  .nextElementSibling
  .style.color = 'red';

<section>
  <header>
    <h2 class="licht"><span id="Standort" class="-sitemap-select-item-selected">Standort</span></h2>
  </header>
  <p>Lorem ipsum</p>
</section>