ul li:last-child 影响第二个 ul 中的最后一个 li。

Question

我的问题是使用伪类选择器:last-child时，我期望包含E的li受到样式的影响，但实际上受到影响的是在.subNav中的最后一个li。

我已经尝试了下面这些方法，但都没有起作用。

JsFiddle

nav ul:first-child li:last-child {border: none;padding-right: 0;}
nav ul:not(.subNav) li:last-child {border: none;padding-right: 0;}

如何获取主要的 ul 的最后一个 li 元素？

- Xlander

Answer 1

在最后一个li后面有一个div，因此它不是最后一个子元素。您可以使用:last-of-type来定位最后一个li：

nav ul li:last-of-type {border: none;padding-right: 0;}

DEMO

- web-tiki

---

非常感谢您的帮助。 - Xlander

Answer 2

删除在 ul 中的 div 标签。直接在 ul 中添加任何标签都是无效的。

将其放置在 li 中，或者如果不是必要的话就删除它。

否则你的 css 选择器就很好。

<nav>
    <ul>
        <li><a href="#">A</a></li>
        <li class="B">
            <a href="#">B</a>
            <ul class="subNav">
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
                <li><a href="#">I</a></li>
            </ul>
        </li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
</nav>

演示

- Sowmya

---

非常感谢您的帮助。 - Xlander

Answer 3

那不是最后一个子元素，你可以使用nth-last-child:

nav ul > :nth-last-child(2)

或者，使用last-of-type：

nav ul > li:last-of-type

---

但我建议您使用@Sowmya的答案，因为它在语义上是正确的。

- Bhojendra Rauniyar

---

非常感谢您的帮助。 - Xlander

Answer 4

您的选择器逻辑上是正确的，但问题在于 li 不是其父元素 ul 的最后一个子元素，因为存在 div.clear。

<ul>
    <li><a href="#">A</a></li>
    <li class="B"><a href="#">B</a>
        <ul class="subNav">
        ...
        </ul>
    </li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <div class="clear"></div>
</ul>

在这种情况下，nav ul li:last-child没有匹配任何内容，因为li不是最后一个子元素。你应该使用nav ul li:last-of-type来匹配最后一个li元素。

请注意，ul只允许li作为子元素，所以将div包含在ul中是错误的。如果删除div.clear，你的代码将正常工作。

- Alessandro Vendruscolo

---

非常感谢您的帮助。 - Xlander

Answer 5

伪类:last-child只有在元素是父元素的最后一个子元素时才会触发。

在您的情况下，您的ul中有一个不允许的div。请删除它并在父级ul上使用某种clearfix。

- c_k

---

非常感谢您的帮助。 - Xlander