Question

我对使用：last-child选择器感到有点困惑。我有不同的按钮和标记，如下所示：

<div class="people">
    <a href="pd.html" title="Post-Doctorate's">
        <div class="people-button">Post-Doctorate's</div>
    </a>
    <a href="staff.html" title="Staff">
        <div class="people-button">Staff</div>
    </a>
    <a href="phdstudents.html" title="PhD Students">
        <div class="people-button">PhD Students</div>
    </a>
</div>

现在我想给最后一个按钮设置一个不同的margin-bottom，所以我尝试使用它：

.people a:last-child .people-button {
    margin-bottom: 5px;
}

但似乎这不是正确的选择器。有关如何执行此操作的任何帮助或解释？

Answer 1

您的代码是正确且有效的（see fiddle），但仅限于支持的浏览器即：last-child将无法在IE9下工作。

要查看兼容性表，请参阅：
http://www.quirksmode.org/css/selectors/
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

另一个问题是，它可以被另一个具有重要优先级的CSS规则覆盖。在浏览器或上下文菜单中使用Developer Tool（F12）（右键单击锚点）以检查元素。

通常，浏览器将在右侧窗格中显示此元素，计算出的CSS样式＆amp;所有应用（和覆盖）的样式。

您可以重写代码。取消div内的a，并将a设置为display: block以打破行和工作填充：

<a href="pd.html" title="Post-Doctorate's" class="people-button">
    Post-Doctorate's
</a>
<a href="staff.html" title="Staff" class="people-button">
    Staff
</a>
<a href="phdstudents.html" title="PhD Students" class="people-button">
    PhD Students
</a>

CSS：

.people-button {
    display: block;
}
.people a:last-child {
    padding-bottom: 50px;     /* if you want space inside anchor */
    background-color: #0aa;
}
.people {
    border: 1px solid #000;
    padding-bottom: 20px;     /* if you just want space at bottom of container */
}

http://jsfiddle.net/m7CNv/2/

最后一个孩子选择器

1 个答案: