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来影响第二个元素？

Answer 1

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

类型的第二个子元素

CSS Nth Selector - 意外结果

1 个答案: