选择位于另一个元素内的第一个元素

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 {
    margin: 10px;
}

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

Answer 2

第一个按钮 -

ul > li:first-child > button

最后一个按钮 -

ul > li:last-child > button

直接后代选择器>用于避免在列表嵌套时出现混淆。

http://jsfiddle.net/24tNQ/

Answer 3

您也可以使用直接后代选择器>

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

Answer 4

尝试：

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

DEMO here.

Answer 5

http://jsfiddle.net/PHLMQ/

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