Question

我试图设计一些无序列表并遇到问题...它不会影响输出！

我无法改变的例子。

<div id="footer">
    <div id="foot-nav">
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">site map</a></li>
            <li>three</li>
        </ul>
    </div>
</div>

CSS：

#footer #foot-nav ul.blah {
    list-style-type: none;
}

#footer #foot-nav ul.blah li.blah {
    padding:2px 0;  
}

#footer #foot-nav ul.blah li.blah a {
    color:#333;
    text-decoration: none;
}

#footer #foot-nav ul.blah li.blah a:hover {
    text-decoration: underline;
}

来自同一页面的另一个UL

.mobile-menu #mobile-menu-links ul{
    list-style-type: none;
    margin:0;
    padding-left:3%;
}

.mobile-menu #mobile-menu-links ul li{
   padding-bottom:2px;
   border-bottom:1px solid #bababa;
}

<div class="mobile-menu" id="mobile-account">
    <div id="mobile-menu-links">
        <h4>General:</h4>
        <ul>
            <li><a href="">View your profile</a></li>
            <li><a href="">Change your settings</a></li>
            <li><a href="">View your messages</a></li>
        </ul>
    </div>
</div>

来自＃mobile-menu ul的规则优先考虑问题顶部的ul？

我显然做错了什么，你能帮忙吗？谢谢！

Answer 1

http://jsfiddle.net/GgdhX/

您在LI元素上使用了很多后代选择器来处理ID和不必要的类。

#foot-nav .blah{
   list-style-type: none;
 }

#foot-nav .blah li{
    padding:2px 0;  
 }

#foot-nav .blah li a{
    color:#333;
    text-decoration: none;
 }

#foot-nav .blah a:hover{
    text-decoration: underline;
}

<div id="foot-nav">
    <ul class="blah">
        <li><a href="">home</a></li>
        <li><a href="">site map</a></li>
        <li>three</li>
    </ul>
</div>

Answer 2

#footer #foot-nav ul.blah

此选择器适用于具有<ul>类的blah元素，该类是ID为foot-nav的元素的后代，该元素是具有ID的元素的后代footer。

除了最后一部分，您的HTML与之匹配，因此我认为问题是您的#foot-nav元素不在ID为footer的元素中。

您可以从所有选择器中删除#footer，也可以将#foot-nav元素放在ID为footer的元素中。

修改

好的，根据问题的变化，要么CSS出现问题，要么停止应用，要么重写CSS。

在Web浏览器的开发人员工具中检查元素，以查看规则是否完全显示。如果是，那么它们可能被页面上其他地方的规则所覆盖。如果是这种情况，那么在检查元素时，您应该能够看到其他规则的位置。

如果规则根本没有应用，那么你的CSS可能有问题。您是否通过验证器运行它以检查是否没有语法错误？媒体查询中的规则是否无效？

Answer 3

如果你删除了那里的选择器的所有#footer方面，一切都应该完美。我做了jsfiddle of the working copy。如果这是您想到的UI概念，请告诉我。另外，我建议您阅读CSS Specificity以了解规则在应用于不同嵌套元素时的优先级

风格ul和li

3 个答案: