html - CSS类选择器的行为与id选择器不同

我构建了一个分层菜单系统的模型，其中主菜单（＃moduleMenu1）有一个子菜单（＃moduleMenu2），并且它们都共享一个CSS类。当我在菜单上使用ID选择器时，一切都很好（http://jsfiddle.net/stamminator/pwnuymd2/1）。但是，当我切换到使用类选择器时，这会更加优雅（特别是如果我在菜单中添加了第三个层次结构），选择器将被覆盖（http://jsfiddle.net/stamminator/pwnuymd2/）。

我想可以在样式中的每个属性上使用!important，但是假设我需要在某个时候需要一个页面来按需覆盖这些样式，那么这也不是一个很好的解决方案。除了id选择器或!important之外，还有第三种选择吗？

我不确定这是否相关，但是我也注意到了第二个问题。当我在本地打开HTML文件并在其共享类的Chrome的JavaScript控制台中执行选择器时，我希望可以同时获得这两个元素。相反，我只得到一个。

//what I typed into the console:
$(".moduleMenu");

//my result:
<div id="moduleMenu1" class="moduleMenu">
    <div>
        <a href="">Proposal</a>
        <a href="">Browse</a>
        <a href="">Financial</a>
        <a href="">Documents</a>
    </div>
</div>

//where's #moduleMenu2? They both have the same CSS class

这是一个链接，因此您可以下载文件并根据需要在自己的调试器中运行它：https://onedrive.live.com/redir?resid=9F7FCE5CCA52BABF!33812&authkey=!ANi0Ivf0BbmVbGk&ithint=file%2czip。

我想JavaScript控制台问题不是问题，但我认为我会在涉及到它的情况下提及它。我将为我的CSS正常工作提供任何帮助，我们将不胜感激！

最佳答案

ID选择器比类选择器具有更高的重要性。您几乎应该永远不要在CSS中使用ID。将您的ID选择器更改为类选择器（即使它们是唯一的）也要开心。

<div id="moduleMenu1" class="moduleMenu moduleMenu1">

Demo

当然，您现在可以合并列出的某些选择器。

Demo 2