Question

我构建了一个分层菜单系统的模型，其中主菜单（#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控制台问题不是问题，但我想如果它与之相关，我会提到它。我非常感谢能帮助我正常工作的任何帮助！

Answer 1

ID选择器比类选择器更重要。你几乎不应该在CSS中使用ID。将您的ID选择器更改为类选择器（即使它们是唯一的）并且很高兴。

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

Demo

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

<强> Demo 2

Answer 2

如isherwood所述，ID选择器优先于类选择器。这是由于CSS特异性，这是CSS确定将哪些规则应用于元素的方式。

解释CSS特异性的最简单方法是：！important＆gt;内联＆gt; ID＆gt;课程＆gt;元素＆gt;普遍的＆amp;继承

对于稍微深入一点的解释，CSS特异性存储为四个单独的整数。如果没有样式应用于元素（或者仅应用通用和继承的规则），则该元素的值为0,0,0,0。

第一个值表示内联样式
第二个值代表ID样式规则
第三个值表示类或属性样式规则
第四个值代表标签样式规则

1,0,0,0覆盖0,1,0,0：内联样式将始终覆盖ID样式规则。同样，ID将始终覆盖类。但是，0,1,1,0会覆盖0,1,0,0，因此规则中的类和ID将覆盖ID规则。

除了一些旧的浏览器在255之后翻转值之外，没有多少类可以覆盖ID：覆盖ID样式规则的唯一方法是使用ID，内联样式或！important标志。

CSS类选择器与id选择器

2 个答案: