nth-child()除了最后一个元素外，其他元素都可以使用[重复]。

Question

这个问题在这里已经有了答案:

为什么第nth-child选择器不能使用？ (4个答案)

型的第1次与第2次 (7个答案)

封闭 2个月前.

我基本上是想用css来选择。a 元素单独使用。我目前有3个，前2个可以用，但最后一个不行。

a:nth-child(1) {
  text-decoration: none;
}

a:nth-child(2) {
  text-decoration: none;
}

a:nth-child(3) {
  text-decoration: none;
}

<p>Fancy Buttons</p>

<a href="#">btn 1</a>

<a href="#">btn 2</a>

<a href="#">btn 3</a>

结果是这样的。

Answer 1

的 :nth-child() 伪类 遍数. 使用 :nth-of-type() 而不是。

a:nth-of-type(1) {
  text-decoration: none;
}

a:nth-of-type(2) {
  text-decoration: none;
}

a:nth-of-type(3) {
  text-decoration: none;
}

<p>Fancy Buttons</p>

<a href="#">btn 1</a>

<a href="#">btn 2</a>

<a href="#">btn 3</a>

Answer 2

因为一个反常的原因。p 标签算作第一个孩子，而 a 指数从2开始 ( 尝试删除 p 标签，看看会发生什么，也可以去掉 a 选择器，你就会看到它的表现与你的期望一致)我给你的属性添加了一个颜色，看看它是如何影响的；检查下面的片段。

a:nth-child(1) {
      text-decoration: none;
      color: yellow;
}

a:nth-child(2) {
      text-decoration: none;
      color: blue;
}

a:nth-child(3) {
      text-decoration: none;
      color: green;
}

a:nth-child(4) {
      text-decoration: none;
      color: red;
}

<p>Fancy Buttons</p>

<a href="#">btn 1</a>

<a href="#">btn 2</a>

<a href="#">btn 3</a>

---

顺便说一下，你可以使用 n 来选择所有的孩子，而不是乱七八糟的。

a:nth-child(n) {
  text-decoration: none;
}

<p>Fancy Buttons</p>

<a href="#">btn 1</a>

<a href="#">btn 2</a>

<a href="#">btn 3</a>