将css添加到最后一个元素

Question

我有基于bootstrap的菜单，我想在最后一个下拉菜单中添加css。所以我有html：

<div class="collapse navbar-collapse" >
    <ul class="nav navbar-nav ">
        <li class="drop">
            <a href="1.html">Lorem</a>
            <ul class="dropdown">
                <li><a href="#">Lorem</a></li>
            </ul>
        </li>
        <li class="drop">
            <a href="1.html">Lorem</a>
            <ul class="dropdown">
                <li><a href="#">Lorem</a></li>
            </ul>
        </li>
    </ul>
</div>

我尝试添加css：

 .navbar-nav li.drop ul.dropdown:last-of-type{
    left:-140px;
  }

但是这段代码将css添加到所有下拉菜单中，但我只想要最后一次

Answer 1

这里的问题是last-of-type正在寻找最后一个兄弟，但是你的两个.dropdowns不是兄弟姐妹 - 他们是.drop元素的孩子。

如果你这样做：

.navbar-nav li.drop:last-of-type ul.dropdown{
    left:-140px;
}

...然后它应该按照你的预期工作。