Html 风格ul和li

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

这个例子我无法改变

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

同一页的另一个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#移动菜单链接{
列表样式类型：无；
保证金：0；
左：3%；
}
.移动菜单#移动菜单链接ul li{
垫底：2件；
边框底部：1px实心#巴巴巴；
}
概述：

#移动菜单ul的规则优先于问题顶部的ul

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

#footer #foot-nav ul.blah

此选择器适用于具有

blah

类的

元素，该类元素是ID为

foot nav

的元素的后代，ID为

footer

的元素的后代

除了最后一部分之外，您的HTML与之匹配，因此我假设问题在于

foot nav

元素不在ID为

footer

的元素中

您可以从所有选择器中删除

#footer

，也可以将

#foot nav

元素放在ID为

footer

的元素中

编辑：

好的，根据问题的变化，要么CSS有问题，根本无法应用，要么CSS被覆盖

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

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

对于ID和

LI

元素上不必要的类，您使用了很多后代选择器

#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>

#脚导航之类的{
列表样式类型：无；
}
#足导航，诸如此类{
填充：2px0；
}
#足部导航。诸如此类{
颜色：#333；
文字装饰：无；
}
#脚导航，等等a：悬停{
文字装饰：下划线；
}



三

如果您删除了选择器的所有

#footer

部分，那么一切都会正常工作。我发了一封信。让我知道这是否是您心目中的UI概念。另外，我建议您继续阅读，以了解在应用于不同嵌套元素时规则的优先级如何

您的

页脚在哪里

父元素？它存在于HTML中吗？所有内容都在#页脚中吗？你应该把它弄清楚。你想达到什么目的？将类“blah”用于

ul

和

li

可能有点混淆。不要发布不完整的代码。更新您的问题以包含页脚包装，这是此问题最明显的疑点。当您使用ID（例如#footer#foot nav）时，确实没有理由使用后代选择器。每个ID都应该是唯一的，所以足部导航应该足够了，除非您在其他地方使用了该ID，这是无效的，并且会导致许多奇怪的问题。因为ID是唯一的，所以你可以去掉

blah

类，除非你计划在你的foot-nav中有多个列表。你为什么从css中删除ul？问题的范围通过多次修改而改变，我的答案可能与此无关。我使用了开发工具，注意到了什么是覆盖的，以及为什么文本的颜色将其合并到页脚的相同颜色中。谢谢你，吉姆。

#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>