Question

用这个

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等......但这也行不通。

Answer 1

你正在做的事情应该有效，即使它可能不是最好的方法。

这是edited version working：

a {
    display:block;
}
a:nth-child(1):before {
    content: "› ";
}
a:nth-child(2):before {
    content: "›› ";
}
a:nth-child(3):before {
    content: "››› ";
}
a:nth-child(4):before {
    content: "›››› ";
}
a:nth-child(5):before {
    content: "››››› ";
}

使用此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>

因此，除非您的布局完全是第一个，否则您可能希望使用nth-of-type。

您也可以使用a single colon :before

Answer 2

我想我还没有使用过这个功能，但似乎你必须指定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: "››››› ";
}

演示： http://jsbin.com/aboxop/1

来源： http://jsbin.com/aboxop/1/edit

编辑：此外，正如@GionaF在他的评论中所说，这只会在某些浏览器中得到支持。（支持CSS选择器级别3的那些）

试图瞄准前5个孩子并且失败

2 个答案: