如何通过css选择li没有孩子的孩子？ [英] How to select li child of a ul without nth-child via css?

问题描述

我的项目出现问题，我们的客户在菜单的 ul li 中使用了徽标图像。他已经使用了一个 li 的类放置了标识，但是我不能使用该类;我也不想使用：nth-​​child ，因为将来我们可能会添加一个新的菜单元素。我目前在logo li 内有一个空锚点。是否有可能在CSS中选择这个空的锚。请帮助我。

预先致谢

客户网站： http://www.kangaroopartners.com/about/

我的网站： http://kangaroopartners-2.hs-sites.com/test1

演示 http://jsfiddle.net/thwkav0e/

CSS和HTML：

  ul {display：block;宽度：100％;文本对齐：中心; list-style：none;余量：0; padding：0;} ul li {display：inline-block; padding：10px;} ul li：nth-​​child（4），ul li：last-child {background：red; width：50px;}  

< ul> < li>< a href =＃> Hello1< / a>< / li> < li>< a href =＃> Hello2< / a>< / li> < li>< a href =＃> Hello3< / a>< / li> < li>< a href =＃>< / a>< / li> < li>< a href =＃> Hello4< / a>< / li> < li>< a href =＃>< / a>< / li>< / ul>

解决方案

：empty 选择器应该是您要查找的内容。

  ul li a：空{
 background：red; 
 width：50px; 
 display：inline-block; 
 height：10px; 
} 
  

http://jsfiddle.net/thwkav0e/1/

I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.

Thanks in advance

Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/

CSS and HTML:

ul {
    display:block;
    width:100%;
    text-align:center;
    list-style: none;
    margin:0;
    padding:0;
}

ul li {
    display:inline-block;
    padding: 10px;
}

ul li:nth-child(4), ul li:last-child {
    background:red;
    width:50px;
}

<ul>
    <li><a href="#">Hello1</a></li>
    <li><a href="#">Hello2</a></li>
    <li><a href="#">Hello3</a></li>
    <li><a href="#"></a></li>
    <li><a href="#">Hello4</a></li>
    <li><a href="#"></a></li>
</ul>

解决方案

:empty selector should be what you are looking for.

ul li a:empty {
    background:red;
    width:50px;
    display: inline-block;
    height: 10px;
}

http://jsfiddle.net/thwkav0e/1/

这篇关于如何通过css选择li没有孩子的孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！