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

有几种方法只能隐藏“标题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>的孩子。这是一个兄弟姐妹。

Answer 4

现在有可能

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 5

官方CSS3规范目前不支持这样的任何内容，但我确实认识到它会有用。

我会尝试搜索一些预建的javascript或jquery脚本/库来添加css选择器。虽然我从未遇到过任何事情。

如果您确实遇到过某些问题，请在此处发布。

如果您没有找到任何内容，您可以手动执行此操作，或尝试找到完全不同的解决方案。

我希望我有更好的答案。对不起：（

Answer 6

尝试使用js getElementsby Classname，如果大于1，则使用css：

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

Answer 7

我知道这个问题已经有了明确的答案，但也许其他人想要使用我的css解决方案：

我希望在容器中有一个警报列表（在这种情况下为bootstrap警报），并且它们的边框会崩溃。每个警报都有一个border-radius，当它们都在一个容器中时看起来很傻。所以对于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>

Answer 8

使用:first-of-type

您可以阅读更多here

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

8 个答案: