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>

现在，我想为此选择last of type li，所以这是我的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;
}

现在，如果每个li元素都有一个a元素，以及导致这种情况的原因，我怎么能解决这个问题？

Answer 1

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

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

<强> jsFiddle example

Answer 2

因此，如果我正确理解您的问题，您希望使用last-of-type选择器将最后一个链接设为绿色：

http://jsfiddle.net/YWfx2/

您需要做的就是将选择器放在li上并在其后添加一个标签！

Answer 3

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>

CSS：

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

CSS last-of-type Selector

3 个答案: