如何选择第一个相邻的兄弟姐妹？答案

【问题标题】：How do I select the first adjacent sibling?如何选择第一个相邻的兄弟姐妹？
【发布时间】：2012-02-08 08:38:29
【问题描述】：

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

【问题讨论】：

@greut：如果我找不到 CSS 选择器来执行此操作，我将使用 Javascript。
杰里米，我不太明白你所说的“第一个相邻兄弟”是什么意思。你不能用:first-child吗？
附带说明，这个 HTML 语义很差。为什么不使用标题标签作为标题？如果您这样做了，您可能会发现其他问题会自行解决。

标签： html css css-selectors

【解决方案1】：

有几种方法可以只隐藏“标题 1”：

ul li:first-child {display:none;}

或者：

li.parent{ display: none; }
li.parent + li.parent { display: list-item; }

另外，<li>Child of Heading 2</li>不是<li class="parent">Heading 2</li> 的子代。它是兄弟姐妹。

【讨论】：

这些解决方案都不起作用。在第一种情况下，如果有“标题 1 下的文本”，我可能不想隐藏第一个孩子。当我尝试时，第二种情况不起作用。看来 CSS 不支持我想做的事情。

【解决方案2】：

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

使用 JavaScript 可以以一种相当直接的方式实现所需的效果，您可以根据目的决定是从显示中删除元素还是从文档树中完全删除它们。

【讨论】：

与其求助于 JavaScript，改变 HTML 结构以便可以用 CSS 实现可能更有意义...
@ŠimeVidas 我只想指出，在某些情况下您无法控制 HTML（例如，直接从数据库中读取 HTML - 呃......）但您确实有控制 JavaScript。但我同意如果可能的话最好。

【解决方案3】：

官方的 CSS3 规范目前不支持这样的东西，尽管我确实意识到它会很有用。

我会尝试搜索一些预构建的 JavaScript 或 jQuery 脚本/库以添加 CSS 选择器。虽然我从来没有遇到过任何事情。

如果您没有找到任何东西，您不妨手动执行，或者尝试寻找完全不同的解决方案。

【讨论】：

【解决方案4】：

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

对于问题中的示例，可以使用类似的方法来完成

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

这可行，但要求您可以显式设置兄弟姐妹的样式以覆盖第一个孩子的设置。

【讨论】：

【解决方案5】：

尝试使用 JS 通过 Classname 获取元素，如果超过 1 则使用 CSS：

ul li:first-child {display: none;}

【讨论】：

【解决方案6】：

我知道这个问题已经有一个有效的标记答案，但也许其他人想使用我的纯 css 解决方案：

我希望在容器中有一个警报列表（在本例中为引导警报），并且它们的边框要折叠。每个警报都有一个边界半径，当它们都在一个容器中时看起来很傻。所以使用 margin-top: -1px 我让他们的边界崩溃了。作为下一步，我必须修改第一个、中间的每个警报和最后一个警报的样式。这对于单个警报、两个警报和 n 个警报也应该看起来不错。

.alert {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin: 0;
}

// set for the first alert that it should have a rounded top border

.alert:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

// set for the last alert that it should have a rounded bottom border
// if there is only one alert this will also trigger it to have a rounded bottom border aswell

.alert+.alert:last-child {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders

.alert+.alert:not(:last-child) {
  margin-top: -1px;
  border-radius: 0;
}

// for each following alert in between we remove the top rounded borders and make their borders collapse

这是一个用于多个警报的角度模板。

<div id="alertscontainer">
    <div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class">
        {{alert.body}}
    </div>
</div>

【讨论】：

【解决方案7】：

使用:first-of-type

您可以阅读更多here

【讨论】：

【解决方案8】：

现在可以实现了

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

【讨论】：