html - 如何通过CSS选择没有第n个 child 的ul的li child ?

标签 html css

我的元素出现问题,我们的客户在菜单的 ul li 中使用了 Logo 图像。他使用了带有 li 的类,其中放置了 Logo ,但我不能使用该类;我也不想使用 :nth-child 因为将来我们可能会添加一个新的菜单元素。我目前在 Logo li 中有一个空 anchor 。是否可以在 CSS 中选择这个空的 anchor 。请帮助我。

提前致谢

客户网站:http://www.kangaroopartners.com/about/
我的网站:http://kangaroopartners-2.hs-sites.com/test1
演示 http://jsfiddle.net/thwkav0e/

CSS 和 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 选择器应该是您要查找的内容。

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

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

关于html - 如何通过CSS选择没有第n个 child 的ul的li child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30613504/

相关文章:

javascript - 如何制作这种类型的 Bootstrap 轮播

css - 为绝对定位且高度为 : 100vh 的 div 提供边距底部

css - Grails bootstrap 隐藏打印无法按预期工作

html - 具有 3-D 变换的 Firefox 交叉结构

javascript - 更改动画javascript后的文本内容

html - 水平居中一个宽度和高度是绝对值的 <div>

css - 偏移类未应用于 Bootstrap 2 形式

html - Bootstrap : how to vertically align two buttons, 在标题的开头和结尾?

javascript - 通过 jQuery 添加一个类到 div onclick

html - 如何在 body 标签中垂直和水平居中文本?