UL李：最后一个孩子影响在第二UL

我的问题是在过去里，使用伪代码:last-child当我想到包含liE由风格的影响，但它在最后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;}

如何让主ul的最后li影响？

来源

2014-09-10 Xlander

最后一个里面有一个div。因此，它不是最后一个孩子。你可以使用:last-of-type瞄准最后李：

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

DEMO

来源

2014-09-10 09:49:44

非常感谢您的帮助。 – Xlander 2014-09-10 09:55:08

欢迎您，很高兴有帮助:) – 2014-09-10 09:56:10

删除位于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>

DEMO

来源

2014-09-10 09:46:54 Sowmya

非常感谢您的帮助。 – Xlander 2014-09-10 09:55:54

这不是最后一个孩子，你可以使用第n-最后孩子：

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

或者，用最后的类型：

nav ul > li:last-of-type

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

来源

2014-09-10 09:48:01

非常感谢您的帮助。 – Xlander 2014-09-10 09:56:16

不，请提及！只要接受你喜欢的答案... – 2014-09-10 09:57:01

你选择在逻辑上是正确的，但问题是，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你的代码将工作。

来源

2014-09-10 09:48:52

非常感谢你的帮助。 – Xlander 2014-09-10 09:56:39

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

在你的情况下，你的ul内有div，这是不允许的。将其移除并在父母ul上使用某种clearfix。

来源

2014-09-10 09:49:51

非常感谢您的帮助。 – Xlander 2014-09-10 09:54:45

UL李：最后一个孩子影响在第二UL

回答

相关问题