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

JsFiddle

My problem is that when using the pseudo code :last-child I expect the li containing E to be affected by the style but it's the last li in .subNav which is affected.

我的问题是,当使用伪代码时:last-child我希望包含E的li受到样式的影响,但它是受影响的.subNav中的最后一个。

I've tried those(below), but nothing works.

我尝试了那些(下面),但没有任何作用。

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

How to get the main ul's last li affected?

如何让主要的ul最后一个受到影响?

5 个解决方案

#1

There is a div after the last li. Therefore, it isn't the last child. You could use :last-of-type to target the last li :

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

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

DEMO

#2

Remove the div which is inside ul. Adding any tags directly inside ul is not valid.

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

Place it inside li or remove it if not really necessary.

如果没有必要,将其放入里面或将其取出。

Otherwise your css selector is just fine.

否则你的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

#3

That's not the last child, you can use nth-last-child:

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

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

Or, use last-of-type:

或者,使用last-of-type:

nav ul > li:last-of-type

---

But I would recommend you to use as @Sowmya answer which is symantically correct.

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

#4

Your selector is logically correct, but the problem is that the li is not the last child of its parent ul, because there's that div.clear

你的选择器在逻辑上是正确的,但问题是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>

In this case nav ul li:last-child doesn't match anything because the li is not the last child. You should use nav ul li:last-of-type to match the last li element.

在这种情况下,nav ul li:last-child与任何东西都不匹配,因为li不是最后一个孩子。您应该使用nav ul li:last-of-type来匹配最后一个li元素。

Note that uls only allow li as children, so having a div contained in an ul is wrong. If you remove that div.clear your code will work.

请注意,uls只允许li作为子项,因此在ul中包含div是错误的。如果删除div.clear,您的代码将起作用。

#5

The pseudo class :last-child only triggers if the element is the last child in the parent.

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

In your case, there is a div within your ul which is not allowed anyway. Remove it and use a clearfix of some kind on the parent ul.

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