CSS:选择第一个相邻的兄弟

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？有没有办法寻找相邻的兄弟姐妹并选择第一个？

Answer 1

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

对于问题中的例子,可以用这样的东西来完成

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

这有效,但要求您可以在兄弟姐妹上明确设置样式以覆盖第一个孩子的设置.

Answer 2

使用当前定义和实现的CSS是不可能的.它需要一个选择器,根据其后的兄弟选择元素.CSS选择器可以基于前面或外部元素选择元素,但不能基于后面或内部元素.

可以使用JavaScript以相当简单的方式获得所需的效果,并且您可以根据目的决定是从显示中删除元素还是从文档树中完全删除它们.

Answer 3

现在这是可能的

li:first-of-type {
    display: none;
}

这将匹配第一个 li 标签。

li:first-of-type:not(:only-of-type) {
    margin: 10px;
}

如果您想要更多的控制 - 例如仅当有更多项目时才在两个项目之间添加空间，上述方法才有效。混合伪选择器可能非常强大。https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Answer 4

现在可以将:has()伪类与相邻的同级组合器\xc2\xa0( +)一起使用。

\n

\n

如果作为参数:has()传递的任何相对选择器在锚定到该元素时与至少一个元素匹配，则函数式 CSS 伪类表示该元素。\n此伪类提供了一种选择父元素或前一个同级元素的方法通过将相对选择器列表作为参数来相对于引用元素。

\n

/* Selects an h1 heading with a\nparagraph element that immediately follows\nthe h1 and applies the style to h1 */\nh1:has(+ p) {\n  margin-bottom: 0;\n}\n

\n

\n

对于您的示例，您可以使用：

\n

li.heading:has(+ li.heading) { display: none; }\n

\n

请注意，这个伪类仍然非常新，尚未得到所有主要浏览器的完全支持（例如 Firefox）的完全支持。

\n