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

Question

查看此示例 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 提供不同的样式。

Answer 1

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

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