Question

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

例如，我的父母有10个子元素。我想隐藏第4个孩子之后的所有儿童元素。

是否有任何选择器让我在第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

Answer 1

你可以这样做：

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

Answer 2

这也有效：

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

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

Answer 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>

Answer 4

你可以使用兄弟选择器~来与第n个孩子选择器结合使用。

一般兄弟组合器由＆＃34; tilde＆＃34; （〜）性格它分隔了两个简单选择器序列。〜w3

快速演示将是：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

寻找一个css选择器，在第n个孩子之后选择所有孩子

4 个答案: