Question

尝试使浅绿色的背景具有深色文本而深绿色的背景具有白色文本，但由于某种原因，a：nth-child（奇数）选择器针对列表中的所有锚点。有任何想法吗？也为它制作了一支笔： http://codepen.io/plloyd11/pen/zfcED

HTML：

<div id="commercialNav">
    <ul>
        <li><a href="/auditcomplete">Audit Complete</a>
        </li>
        <li><a href="/commercial-bed-bug-program">Bed Bug Elite</a>
        </li>
        <li><a href="/bird-select">Bird Select</a>
        </li>
        <li><a href="/german-cockroach-program-overview">Cockroach Clean Out Program</a>
        </li>
        <li><a href="/ecoready">EcoReady</a>
        </li>
        <li><a href="/systematic-fly-elimination">SFE Fly Program</a>
        </li>
        <li><a href="/healthcare">Healthcare</a>
        </li>
        <li><a href="/hotels-and-resorts">Hotels and Resorts</a>
        </li>
        <li><a href="/inspected-facilities">Inspected Facilities</a>
        </li>
        <li><a href="/mosquito-direct">MosquitoDirect</a>
        </li>
        <li><a href="/commercial-product-lines">Product Lines</a>
        </li>
        <li><a href="/property-management">Property Management</a>
        </li>
        <li><a href="/restaurants">Restaurants</a>
        </li>
        <li><a href="/termites-commercial">Termites</a>
        </li>
    </ul>
</div>

CSS

#commercialNav li {
list-style-type: none;  
}

#commercialNav a {
color: #fff;
text-decoration:none;
}

#commercialNav li:nth-child(even) {
background:#215034;
width: 250px;
text-align: center;
}

#commercialNav li:nth-child(odd) {
background:#BACDBA;
width: 250px;
text-align: center;
}
#commercialNav a:nth-child(odd) {
color:#215034;
}

Answer 1

将最后一条规则更改为：

#commercialNav li:nth-child(odd) a{
    color:#215034;
}

<强> jsFiddle example

锚点不是#commercialNav div的子节点（尽管它们是后代），因此您尝试的特定选择器将不起作用。如果你没有列表项，那么规则就可以了，但由于锚不是彼此的兄弟，你需要使用上面显示的选择器。

Answer 2

nth-child（odd）查找 immediate 父级的奇数子元素。你的每个标签都是他们父母的第一个孩子（李的）。

我想你想要：

#commercialNav li:nth-child(odd) a

Answer 3

试试这个：

#commercialNav li:nth-child(odd) a{
    color:#215034;
}

第n个孩子偶数/奇数选择器

3 个答案: