試圖目標前5名第n兒童和失敗

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的人）