UL李:最后一个孩子影响在第二UL
我的问题是在过去里,使用伪代码:last-child
当我想到包含li
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;}
如何让主ul
的最后li
影响?
最后一个里面有一个div。因此,它不是最后一个孩子。你可以使用:last-of-type
瞄准最后李:
nav ul li:last-of-type {border: none;padding-right: 0;}
删除位于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>
非常感谢您的帮助。 – Xlander 2014-09-10 09:55:54
这不是最后一个孩子,你可以使用第n-最后孩子:
nav ul > :nth-last-child(2)
或者,用最后的类型:
nav ul > li:last-of-type
但我会建议你使用@Sowmya答案,它在语义上是正确的。
非常感谢您的帮助。 – 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
你的代码将工作。
非常感谢你的帮助。 – Xlander 2014-09-10 09:56:39
非常感谢您的帮助。 – Xlander 2014-09-10 09:55:08
欢迎您,很高兴有帮助:) – 2014-09-10 09:56:10