html - CSS 最后类型选择器

Question

我最近一直在回顾网页设计并通过它学习新的东西。我现在正在使用 last-of-type 选择器，我正在尝试为导航栏这样做，但它似乎没有按照我想要的方式工作。

HTML:

<nav class="main-nav">
    <div class="inset-inner">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About Us</a></li>
        </ul>
    </div>
</nav>

现在，我想为此选择 list of type，所以这是我的 CSS:

.main-nav ul li:last-of-type {
    color: green;
}

为此，我确实为 a 元素设置了颜色，因此我尝试添加 !important，但它根本没有帮助。让它工作的唯一方法是我这样做:

HTML:

<nav class="main-nav">
    <div class="inset-inner">
        <ul>
            <!--<li><a href="">Home</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">About Us</a></li>-->
            <li><a href="">Home</a>
                <a href="">Contact</a>
                <a href="">About Us</a>
            </li>
        </ul>
    </div>
</nav>

CSS:

/*
.main-nav ul li:last-of-type {
    color: green !important;
}
*/

.main-nav ul li a:last-of-type {
    color: green;
}

现在，当每个 a 元素都有一个 li 元素时，我该如何解决这个问题，到底是什么原因造成的？

Answer 1

使用 last-of-type在 <li> 上, 然后添加 a最后:

.main-nav ul li:last-of-type a{
    color: green;
}

jsFiddle example