为什么第三个a元素不是浅绿色？
<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>在这种情况下，您可以使用：类型为选择器的last。
<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>:last-child的意思正是它所说的。
由于您的<a>后面有一个<br>，所以它不是最后一个子级。
您应该使用的伪选择器是
https://css-tricks.com/almanac/selectors/l/last-child/
使用：last of type与：nth child非常相似，但有一个关键区别：它不那么具体。在上面的例子中，如果如果在最后一个child（1）中使用了p:n，则不会发生任何事情，因为段落不是其父项的最后一个子项。这揭示了：类型的最后一个：它针对特定类型的相对于类似兄弟的特定布置中的元素，并不是所有的兄弟姐妹。