列表元素上的邊界半徑？

我想添加一個邊框半徑的項目列表，但我不希望每個項目應用於它的樣式。現在我的風格有一種顏色的奇怪列表元素，偶數元素的顏色較暗。當我將邊界半徑應用於li時，它對每一行都是可見的，但我只希望將第一個項目和最後一個項目應用於該項目。如果沒有爲這兩個列表項目製作特殊的ID或課程，我該如何做到這一點？列表元素上的邊界半徑？

這是我的HTML和CSS：

<section id="list"> 
<ul> 
     <li>Song 1</li> 
     <li>Song 2</li> 
     <li>Song 3</li> 
    </ul> 
</section> 

ul{ 
list-style:none; 
padding-left:0px; 
width:600px; 
} 

ul li:nth-child(odd){ 
background: rgba(12,147,0,0.4); 
} 

ul li:nth-child(even){ 
background: rgba(12,147,0,0.7); 
} 

li{ 
padding:15px; 
border-radius: 20px; 
}

來源

2011-07-20 Nicole Roen

你的第一個'UL李：第n個孩子（甚至）'的意思是'UL李：第n - 小孩（偶）：懸停'，我敢肯定。事實上，兩個懸停規則可以簡單地壓縮到選擇器'ul li：hover'。 – BoltClock

至於邊框半徑，你的意思是你只是想整個列表的頂部和底部的角落四捨五入？ – BoltClock

您的答案的第一部分是無關緊要的，因爲我輸入了錯誤的代碼並編輯了我的帖子。但是，是的，我希望整個列表的頂部和底部角落四捨五入。 –

使用:first-child和:last-child

li:first-child, li:last-child{ 
    padding:15px; 
    border-radius: 20px; 
}

來源

2011-07-20 16:10:08

我不認爲你應該像這樣應用僞類。結果是非常尷尬：http://jsfiddle.net/BoltClock/AQYTF – BoltClock

你們都幫我弄明白了。如果寫成這樣：li {padding：15px; } li：第一個孩子border-top-left-radius：20px; border-right-right-radius：20px; } li：最後孩子 border-bottom-left-radius：20px; border-bottom-right-radius：20px; } –

也@BoltClock：謝謝你的鏈接。這非常有用。 –

列表元素上的邊界半徑？

回答

相關問題