Question

为什么第3个a元素不是 lightgreen 颜色？

<html>
<style type="text/css">
div.poncho {
    background-color: #555;
    font-size: 200%; 
    padding: 1em;
}
div.poncho a[poncho] {
    color: bisque;
}
div.poncho a:first-child {
    color: darkcyan;
}
div.poncho a:last-child {
    color: lightgreen;
}
</style>

<body>
    <div class="poncho">
        <a poncho>poncho 1</a>
        <br>
        <a poncho>poncho 2</a>
        <br>
        <a poncho>poncho 3</a>
        <br> <!-- if removed, it works as expected -->
    </div>
</body>

Answer 1

:last-child正是它所说的。

由于您的<a>后面有<br>，因此不是最后孩子。

Answer 2

在这种情况下，您可以使用 :last-of-type 选择器。

＆＃13;

<html>
<style type="text/css">
div.poncho {
    background-color: #555;
    font-size: 200%; 
    padding: 1em;
}
div.poncho a[poncho] {
    color: bisque;
}
div.poncho a:first-child {
    color: darkcyan;
}
div.poncho a:last-of-type {
    color: lightgreen;
}
</style>

<body>
    <div class="poncho">
        <a poncho>poncho 1</a>
        <br>
        <a poncho>poncho 2</a>
        <br>
        <a poncho>poncho 3</a>
        <br> <!-- if removed, it works as expected -->
    </div>
</body>

＆＃13;

Answer 3

你应该使用的伪选择器是

https://css-tricks.com/almanac/selectors/l/last-child/

使用：last-of-type非常类似于：nth-child但有一个关键区别：它不太具体。在上面的例子中，如果我们使用了p：nth-last-child（1），没有任何事情会发生，因为段落不是其父（the）的最后一个子节点。这个揭示了：最后的类型：它针对特定类型的与类似兄弟姐妹有关的特定安排中的元素，不是所有的兄弟姐妹。

CSS选择器：last-child

3 个答案: