Question

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}

Answer 2

由于a不是最后一个孩子，因此最后一个孩子为form

Answer 3

在此示例中，<a href="#">world</a>不是父元素<div class="round-buttons">的最后一个子元素 - 此元素的最后一个子元素为<input name="q" ... >

：first-child和：last-child选择器不考虑元素类型 - 所有元素都相等。您可以将标记放入div或span

请参阅http://jsfiddle.net/jwmCd/4/

Answer 4

表单是最后一个对象。您可以将链接放在一个单独的div中，并从该那个中调用last-child。

<div>
    <div>
        <!-- LINKS HERE -->
    </div>
    <form></form>
</div>

为什么：当我们内部有更多元素时，最后一个孩子不工作？

4 个答案: