Html 如何选择第一个相邻的兄弟姐妹？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8828608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I select the first adjacent sibling?
提问by Jeremy
I have an HTML list like so:
我有一个像这样的 HTML 列表：
<ul>
<li class="heading">Heading 1</li>
<li class="heading">Heading 2</li>
<li>Text Under Heading 2</li>
</ul>
Since Heading 1 has no text under it, I want to hide it with CSS.
由于标题 1 下面没有文字，我想用 CSS 隐藏它。
If I do this,
如果我这样做，
li.heading + li.heading { display: none; }
it hides Heading 2 instead of Heading 1.
它隐藏了标题 2 而不是标题 1。
How can I hide Heading 1? Is there a way to look for adjacent siblings and select the first one?
如何隐藏标题 1？有没有办法寻找相邻的兄弟姐妹并选择第一个？
采纳答案by Jukka K. Korpela
It is not possible using CSS as currently defined and implemented. It would require a selector that selects an element on the basis of its siblings after it. CSS selectors can select an element on the basis of preceeding or outer elements, but not on the basis of following or inner elements.
使用当前定义和实现的 CSS 是不可能的。它需要一个选择器，根据它之后的兄弟元素来选择一个元素。CSS 选择器可以根据前面或外部元素选择元素，但不能根据后面或内部元素选择元素。
The desired effect can be achieved using JavaScript in a rather straightforward way, and you can decide, depending on the purpose, whether you just remove the elements from display or completely remove them from the document tree.
使用 JavaScript 可以以一种相当直接的方式实现所需的效果，您可以根据目的决定是从显示中删除元素还是从文档树中完全删除它们。
回答by Eggert Jóhannesson
It is possible to target first sibling with CSS, with some limitations.
可以使用 CSS 定位第一个兄弟姐妹，但有一些限制。
For the example in the question it could be done with something like this
对于问题中的例子，它可以用这样的东西来完成
li.heading { display: none; } /* apply to all elements */
li.heading + li.heading { display: list-item } /* override for all but first sibling */
This works, but requires that you can explicitly set the styles on the siblings to override the setting for first child.
这有效，但要求您可以显式设置兄弟姐妹的样式以覆盖第一个孩子的设置。
回答by bookcasey
There are a few ways to hide only the "Heading 1" only:
有几种方法可以仅隐藏“标题 1”：
ul li:first-child {display:none;}
ul li:first-child {display:none;}
Alternatively:
或者：
li.parent{ display: none; }
li.parent + li.parent { display: list-item; }
Also, <li>Child of Heading 2</li>is nota child of <li class="parent">Heading 2</li>. It is a sibling.
另外，<li>Child of Heading 2</li>是不是一个孩子<li class="parent">Heading 2</li>。它是一个兄弟姐妹。
回答by Nabeel Khan
try using JS to getElementsby Classname and if more than 1 then use CSS:
尝试使用 JS 来 getElementsby Classname，如果超过 1，则使用 CSS：
ul li:first-child {display: none;}
回答by James Kyle
The official CSS3 Spec does not currently support anything like this, though I do realize that it would be useful.
官方的 CSS3 规范目前不支持这样的任何东西，但我确实意识到它会很有用。
I would try doing searches for some pre-built JavaScript or jQuery scripts/libraries for adding CSS selectors. Although I have never come across anything.
我会尝试搜索一些预先构建的 JavaScript 或 jQuery 脚本/库以添加 CSS 选择器。虽然我从来没有遇到过什么。
If you do not find anything, you might as well just do it manually, or try finding a completely different solution.
如果找不到任何东西，您不妨手动进行，或者尝试寻找完全不同的解决方案。
回答by FTav
I know that this question has already a valid marked answer, but maybe other people want to use my css-only solution:
我知道这个问题已经有一个有效的标记答案，但也许其他人想使用我的 css-only 解决方案：
I wanted to have a list of alerts (in this case bootstrap alerts) in a container and their border to collapse. Each alert has a border-radius, which looks rather silly when they are all in one container. So with margin-top: -1px I made their borders collapse. As a next step I had to modify the styles of the first, every alert in between and the last alert. And this should also look nice for a single alert, two alerts and n alerts.
我想要一个容器中的警报列表（在这种情况下是引导警报），并且它们的边框要折叠起来。每个警报都有一个边界半径，当它们都在一个容器中时，这看起来相当愚蠢。所以使用 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
And here is an angular template for multiple alerts.
这是用于多个警报的角度模板。
<div id="alertscontainer">
<div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class">
{{alert.body}}
</div>
</div>
