寻找一个在第 n 个孩子之后选择所有孩子的 CSS 选择器答案

【问题标题】：Looking for a css selector that selects all childs after nth child寻找一个在第 n 个孩子之后选择所有孩子的 CSS 选择器
【发布时间】：2015-04-30 17:02:03
【问题描述】：

是否有任何可用的 css 选择器可以选择特定孩子之后的所有孩子？

例如，我有一个有 10 个子元素的父元素。我想隐藏第四个孩子之后的所有子元素。

是否有任何选择器可以让我选择第 4 个之后的所有孩子？

我知道我可以做相反的事情，即：全部隐藏，只显示前 4 个，但我想知道是否可以反过来。

我目前的解决方案：

.parent .child {
    display: none;
}
.parent .child:nth-child(-n+4){
    display: block;
}

我想要的解决方案：

.parent .child {
    display: block;
}
.parent .child*some selector that selects all after the 4th child*{
    display: none;
}

我的预期结果：

Fiddle

【问题讨论】：

标签： css css-selectors

【解决方案1】：

你可以这样做：

.parent .child:nth-child(n+5){
    display: none;
}

【讨论】：

我怎么会错过那个-.- thnx

【解决方案2】：

这也可以：

.parent .child {
    display: block;
}
.parent .child:nth-child(4) ~ .child{
    display: none;
}

http://jsfiddle.net/b0Lrehpu/3/

【讨论】：

【解决方案3】：

嗯……

也许你正在寻找这样的东西：http://jsfiddle.net/Bladepianist/vw8cjwa8/

CSS

.parent .child {
    display: block;
}
.parent .child:nth-child(n+5){
    display: none;
}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
</div>

【讨论】：

red 的目的是向他表明它正在工作并且他可以做任何他想做的事情:)。不管怎样，你是对的，所以我编辑了我的帖子；）。

【解决方案4】：

您可以使用兄弟选择器~ 来与第 n 个子选择器组合来实现此目的。

一般的兄弟组合符由“波浪号”(~) 字符组成分隔两个简单选择器序列。 ~w3

快速演示是：

.parent div {
  height: 20px;
  width: 20px;
  background: tomato;
  margin: 2px;
  display: inline-block;
  position: relative;
}
.parent div:nth-child(4) {
  background: lime;
}
.parent div:nth-child(4) ~ div {
  background: green;
}

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：