css - 试图针对前 5 个孩子并失败了

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

你已经在做的应该可以工作，即使它可能不是最好的方法。

这是一个编辑后的版本：

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>​

So, unless your layout is exactly the first one, you probably want to use nth-of-type.

You can also use 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 的）