0

我正在尝试设置一些无序列表的样式并遇到问题……它不会影响输出！

我无法更改的示例。

<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 吗？

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

4

3 回答 3

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>
于 2013-07-22T17:38:46.260 回答
0 
#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 可能有问题。您是否通过验证器运行它以检查是否没有语法错误？媒体查询中的规则是否无效？

于 2013-07-22T17:33:29.373 回答
0

如果您删除#footer那里的选择器的所有方面，那么一切都应该正常工作。我做了一个工作副本的 jsfiddle。让我知道这是否是您想到的 UI 概念。另外，我建议您阅读CSS Specificity以了解规则在应用于不同嵌套元素时的优先级

于 2013-07-22T17:45:44.397 回答