Question

我的问题是，在使用伪代码:last-child时，我希望包含li的{{1}}受到样式的影响，但它是{{1}中的最后一个E受影响的。

我已尝试过这些（下方），但没有任何作用。

li

如何让主.subNav的最后nav ul:first-child li:last-child {border: none;padding-right: 0;} nav ul:not(.subNav) li:last-child {border: none;padding-right: 0;}受到影响？

Answer 1

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

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

<强> DEMO

Answer 2

删除div内的ul。直接在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>

<强> DEMO

Answer 3

那不是最后一个孩子，你可以使用nth-last-child：

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

或者，使用last-of-type：

nav ul > li:last-of-type

但我建议您使用@Sowmya答案，这在语法上是正确的。

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，则代码将起作用。

Answer 5

伪类:last-child仅在元素是父元素中的最后一个子元素时触发。

在您的情况下，div中有ul，但无论如何都是不允许的。删除它并在父ul上使用某种clearfix。

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

5 个答案: