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

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例子

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