選擇這是另一種元素

Question

我想在此設置來選擇我的第一個和最後一個按鈕裏面第一個元素：

<ul> 
    <li> 
    <button>stuff</button> 
    </li> 
    <li> 
    <button>stuff</button> 
    </li> 
    <li> 
    <button>stuff</button> 
    </li> 
</ul> 

可以這樣用CSS來實現？我正嘗試使用:first-of-type和:first-child，但它們不起作用。

Answer 1

第一個按鈕 -

ul > li:first-child > button 

最後一個按鍵 -

ul > li:last-child > button 

的直接後代選擇>用來避免，如果列表嵌套混亂。

http://jsfiddle.net/24tNQ/

Answer 2

嘗試：

li:first-of-type button,li:last-of-type button{ 
    color:red; 
} 

DEMO here.

Answer 3

方式一：

ul li:first-child button { 
    margin: 10px; 
} 

 

ul li:last-child button { 
    margin: 10px; 
} 

Answer 4

http://jsfiddle.net/PHLMQ/

li:first-child button { background:green} 
li:last-child button { background:red} 

Answer 5

您也可以使用嫡系選擇>

ul li:first-child > button { 
    padding: 2px 5px; 
} 
ul li:last-child > button { 
    padding: 2px 5px; 
}