Css 试图瞄准前5个孩子但失败了

用这个

a:nth-child(n)::before
{
    content: "› ";
}

a:nth-child(n+1)::before
{
    content: "›› ";
}

a:nth-child(n+2)::before
{
    content: "››› ";
}

a:nth-child(n+3)::before
{
    content: "›››› ";
}

a:nth-child(n+4)::before
{
    content: "››››› ";
}

我正试着去

›a1

››a2

›››a3

››››a4

›››››a5

---

但它不起作用。。。需要帮助时，也尝试使用1,2,3,4,5代替n+1，等等。。。但这也不起作用。

我想我还没有太多地使用该功能，但似乎您必须将

n+1

指定为第一个，然后从那里开始：

a:nth-child(n+1)::before
{
  content: "› ";
}

a:nth-child(n+2)::before
{
  content: "›› ";
}

a:nth-child(n+3)::before
{
  content: "››› ";
}

a:nth-child(n+4)::before
{
  content: "›››› ";
}

a:nth-child(n+5)::before
{
  content: "››››› ";
}

演示：

资料来源：

---

编辑：另外，由于@GionaF在他的评论中提到了这一点，这将只在某些浏览器中得到支持。（那些支持CSS选择器级别3的）我想我还没有太多地使用该功能，但似乎你必须指定

n+1

作为你的第一个，然后从那里开始：

a:nth-child(n+1)::before
{
  content: "› ";
}

a:nth-child(n+2)::before
{
  content: "›› ";
}

a:nth-child(n+3)::before
{
  content: "››› ";
}

a:nth-child(n+4)::before
{
  content: "›››› ";
}

a:nth-child(n+5)::before
{
  content: "››››› ";
}

演示：

资料来源：

---

编辑：另外，由于@GionaF在他的评论中提到了这一点，这将只在某些浏览器中得到支持。（那些支持CSS选择器级别3的人）

你已经在做的事情应该是可行的，即使这可能不是最好的方法

这里有一个：

使用此HTML：

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<a href="#">5</a>​

​

但不适用于此：

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<div>5</div>
<a href="#">6</a>​

5.
​

因此，除非您的布局恰好是第一个布局，否则您可能希望使用

---

您也可以使用

您已经在做的事情应该是有效的，即使这可能不是最好的方法

这里有一个：

使用此HTML：

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<a href="#">5</a>​

​

但不适用于此：

<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<div>5</div>
<a href="#">6</a>​

5.
​

因此，除非您的布局恰好是第一个布局，否则您可能希望使用

---

---

您也可以使用

您正在测试的浏览器以及当前结果是什么？您需要每五个链接都这样标记，还是只标记第一个？如果是前者，你必须使用

5n+1,2,3

表达式，如果是后者，我想数字就可以了。看来n个孩子真的是多才多艺。对于那些有同样问题的人的未来参考，可以在这里找到文档：@Joseph Marikle:是的！直到您尝试使用它按类或属性进行过滤（这不起作用）…；）你在用什么浏览器进行测试？当前的结果是什么？你需要每五个链接都这样标记，还是只标记第一个？如果是前者，你必须使用

5n+1,2,3

表达式，如果是后者，我想数字就可以了。看来n个孩子真的是多才多艺。对于那些有同样问题的人的未来参考，可以在这里找到文档：@Joseph Marikle:是的！直到您尝试使用它按类或属性进行过滤（这不起作用）…；）它将用（n+5）样式标记第6个和所有后续的

a

元素。@raina77ow对我来说没问题。总有5个元素。最好指定1、2、3、4和5，以便更清楚地表明一次只针对一个元素。自我文档化代码和所有的应用程序，具体是什么？你的意思不是n+1和n+2，而是1和2？？@b0x0rz。）你检查了注释中的JS提琴了吗？它会用（n+5）样式标记第6个和所有后续的

a

元素。@raina77ow对我来说没问题。总有5个元素。最好指定1、2、3、4和5，以便更清楚地表明一次只针对一个元素。自我文档化代码和所有的应用程序，具体是什么？你的意思不是n+1和n+2，而是1和2？？@b0x0rz。）你检查了评论中的JS小提琴了吗？我得到了›的1,3,5,0,0（最新的chrome btw:P）你的第二和第四元素是
天哪，我太傻了。关于这一点的提示在上面的实际答案中。我错过了：（完全。现在一切都好了-我删除了BR's，没有必要将

：before

更改为

：before

，因为每个浏览器都支持

：nth-child（）

还支持伪元素上的双冒号。如果您不支持IE8，则W3C建议今后采用双冒号。@BoltClock k将其改回：Pi获得1,3,5,0,0个›（最新的chrome btw:P）你的第二个和第四个元素是
天哪，我太笨了。关于这一点的提示在上面的实际答案中。我错过了：（完全。现在一切都好了-我删除了br's没有必要将

：：before

更改为

：before

，因为每个浏览器都支持

：nth-child（）

还支持伪元素上的双冒号。如果您不支持IE8，W3C建议继续采用双冒号。@Boltk将其改回：P