寻找一个 css 选择器，它选择第 n 个 child 之后的所有 child

Question

是否有任何 css select 或 select 在特定 child 之后全部 child 可用？

例如，我有一个包含 10 个 child 元素的 parent。我想隐藏第 4 个 child 之后的所有 child 元素。

有没有 select 或者让我 select 在第 4 个之后的所有 childs？

我知道我可以做相反的事情，即：隐藏所有，只显示前 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 个子选择器来实现此目的。

The general sibling combinator is made of the "tilde" (~) character that separates two sequences of simple selectors. ~ 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>

寻找一个 css 选择器，它选择第 n 个 child 之后的所有 child

Looking for a css selector that selects all childs after nth child

css

css-selectors