css - 第 nth-child 在瞄准一个时隐藏了我所有的元素

Question

不确定我是否使用了错误的选择器，但我的标记看起来像这样

<div class = "col-xs-12 plans__articles">
<div class = "foo">....</div>
<div class = "foo">....</div>
<div class = "foo">....</div>
<div class = "foo">....</div>
</div>

我想选择第一个 foo。

.foo:nth-child(1n){ }

但它对所有样式都应用了样式？

Answer 1

指定1n 将选择每个 .foo 元素。这就像说从整个集合的开头开始，最初没有选择任何元素，选择在集合中重复步进 1 位置时找到的每个元素。

无需指定 1n，只需指定 1。 CSS 会将其转换为 0n+1，这相当于说从总集中的第一个元素开始，选择在重复步进 0 位置时找到的每个元素通过集合(自然这意味着除了它开始的元素之外没有其他元素被击中)。

.foo:nth-child(1) {
  color: red;
  font-size: 48px;
}

<div class = "col-xs-12 plans__articles">
  <div class = "foo">....</div>
  <div class = "foo">....</div>
  <div class = "foo">....</div>
  <div class = "foo">....</div>
</div>

之后，要选择列表中的第二个，您可以简单地使用 .foo:nth-child(2) 等等。