html - 如何选择第一个相邻的 sibling ？

Question

我有一个像这样的 HTML 列表:

<ul>
  <li class="heading">Heading 1</li>
  <li class="heading">Heading 2</li>
  <li>Text Under Heading 2</li>
</ul>

由于标题 1 下面没有文字，我想用 CSS 隐藏它。

如果我这样做，

li.heading + li.heading { display: none; }

它隐藏标题 2 而不是标题 1。

如何隐藏标题 1？有没有办法寻找相邻的 sibling 并选择第一个 sibling ？

Answer 1

可以使用 CSS 定位第一个兄弟，但有一些限制。

对于问题中的例子，它可以用这样的方式来完成

li.heading { display: none; }                   /* apply to all elements */
li.heading + li.heading { display: list-item }  /* override for all but first sibling */

这可行，但需要您可以显式设置 sibling 的样式以覆盖第一个 child 的设置。