css - 为什么 :last-child doesn't work when we have more elements inside?

看这个例子 http://jsfiddle.net/jwmCd/

HTML

<div class="round-buttons">
                <a href="#">hello</a>
                <a href="#">world</a>
    <form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search...">
</form>
</div>

CSS

.round-buttons a:first-child {background:red}

.round-buttons a:last-child {background:green}

.round-buttons a:last-child {background:green} 不适用于这种情况。

动态地可能会有更多链接，我想为第一个和最后一个 anchor 提供不同的样式。

最佳答案

:last-child 只会匹配父元素的最后一个元素，而不管其类型如何(在您的示例中， :last-child 只会匹配 <input> )。使用 :last-of-type 匹配父级中特定类型的最后一个元素，例如:

.round-buttons a:last-of-type {background:green}

关于css - 为什么 :last-child doesn't work when we have more elements inside?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8776848/