有没有一种方法可以用css向第n个子元素隐藏某个元素

Question

我有一个充满了不确定数量的div的div。例如，我想用css隐藏div编号3和on。

有css规则吗？

示例：

<div class="elements-wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
...
</div>

Answer 1

是：

.elements-wrapper div:nth-child(2) ~ div { display: none; } 

~被称为一般的兄弟组合子。基本上，它影响由~之后的零件标识的(~之前的选择器的(所有过程中(而不是之前(的同级。

Answer 2

是的，您可以使用nth-child()

/* hide all from the 4th element*/
.elements-wrapper > *:nth-child(n+4) {
display: none;
}

<div class="elements-wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>