如何在沒有內聯樣式的無序列表中設置每個列表項的樣式？

Question

我有這樣的無序列表：

<div id="topmenudiv"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    </ul> 
 
</div>

如何訪問每個li標籤與CSS樣式單獨每一個不使用內聯樣式？

Answer 1

如果你想以不同的樣式每個列表項，您可以使用nth-child selector：

/* First item */ 
 
li:nth-child(1) { 
 
    color: red; 
 
} 
 

 
/* Second item */ 
 
li:nth-child(2) { 
 
    color: blue; 
 
} 
 

 

 
/* Add additional items */

<div id="topmenudiv"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul> 
 
</div>

Answer 2

使用這樣的：

#topmenudiv ul li { 

}