Question

I cannot change 5th element in my menu. It should have blue background (it works) but I can't change the font color to white.

CSS

ul li:nth-child(5)
{
    background-color: #006db6;
    width: 100px;
    margin: 0 auto;
    border-radius: 5px;
}

ul a:nth-child(5)
{
    color: #FFF;
}

HTML

     <nav>
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Login</a></li> <!-- This element should has other background and font -->
            <li><a href="#">01276 819291</a></li>
        </ul>
    </nav>

Answer 1

您可以只使用相同的伪选择器作为您想要影响的a元素的父级。

ul li:nth-child(5) {
    background-color: #006db6;
    width: 100px;
    margin: 0 auto;
    border-radius: 5px;
}

ul li:nth-child(5) a {
    color: #fff;
}

Answer 2

我猜测a位于第5个li孩子的内部，所以你的CSS应该是这样的：

ul li:nth-child(5) a {
    color: #FFF;
}

Answer 3

匹配a匹配的方式匹配超链接，这是某个东西的第5个孩子。如果要为未排序列表的第5项中的所有超链接着色，您希望匹配ul li:nth-child(5) a：

ul li:nth-child(5) {
    background-color: #006db6;
    width: 100px;
    margin: 0 auto;
    border-radius: 5px;
}

ul li:nth-child(5) a {
    color: #FFF;
}

无法更改<a> font color

3 个答案: