Question

我的div充满了div的数量不确定。我想用例如CSS来隐藏3号div。

有没有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>

有没有办法用css对第n个孩子隐藏某个元素？

2 个答案: