html - 样式 ul 和 li

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>