CSS Nth 选择器 - 意外结果

Question

<div id="quicklinks">
    <div class="sidenav-header">
        <h3>Quick Links</h3>
    </div>

    <a href="/link-to-page-one">Link One</a>
    <a href="/link-to-page-two">Link Two</a>
</div>

在上面的代码中我有两个链接。它似乎解决了此代码块中第二个链接的样式，我必须以第三个元素为目标。我的 CSS 正在处理 <a>虽然标记

#quicklinks {
    height:120px;
}
#quicklinks a {
    display:block;
    color:#fff;
    text-align:left;
    background:#92d050;
    margin:6px 12px;
    padding:10px 12px;
    text-decoration:none;
    border-radius:3px;
    font-weight:normal;
}
#quicklinks a:nth-child(3) {
    background:#ff9900;
}

为什么我的nth-child设置为 #3 以影响第二个 a 元素？

Answer 1

nth-child(3)正在选择任何类型的第三个子元素，包括您的 <div class="sidenav-header">元素。你应该使用 a:nth-of-type(2)选择 a 类型的第二个子元素