CSS选择器特异性比较

Question

我正在重新设计一个第三方平台(MindTouch 4)。在这样做的同时，我试图尽可能广泛地声明所有不同的样式属性，以防止页面上非故意地扩散本地样式的区域。

该平台有一个自定义的SELECT控件，使用如下标记：

<div class="mt-site-nav">
    ...
    <span class="quick-more">
        <span class="drop-link">Current Value</span>
        <ul class="dropdown">
            <li>
                <a href="...">Option 1</a>
            </li>

            <li>
                <a href="...">Option 2</a>
            </li>
        </ul>
    </span>
</div>

我希望使用字体大小为14 is的选项文本样式；本机默认设置为12 is。

所以，我写了这个CSS规则：

body#myid .mt-site-nav .quick-more .dropdown { font-size: 14px; }

但是，当呈现菜单中的链接时，它们的本地规则仍然占上风：

@media screen { .dropdown li a { font-size: 12px; } }

在Chrome中，我可以看到在菜单中呈现链接时会考虑这两种规则，但它们的规则(比我的规则声明得早)获胜。我对此感到困惑，因为我认为我对专一性有很好的把握。因此，我已选中 我的 理解 of 规则并手动计算这两个规则的权重。

我的专一性为0131 (0内联样式，1个ID，3个类，1个元素名)。

本机具有专一性0032 (0内联样式、0 ID、1个类、2个元素名)。(我不确定如何计算媒体选择器在本地规则中的贡献。)

我不在乎你的数学使用什么基数，"0131“大于"0032”。所以我的规则应该赢。

是的，我可以很容易地复制本机规则中出现的元素链(即".dropdown li a")，但我认为这是一种脆弱的方法，我认为重要的是尽可能广泛地设置样式属性，以促进可伸缩性，并防止本机样式在裂缝之间出现。

任何帮助理清这一点，我们将不胜感激。显然，我有可行的备选方案，所以我在这里要求的是对这两条规则在CSS加权系统中的表现的理论解释。

非常感谢。

Answer 1

选择器的主题是.dropdown。

body#myid .mt-site-nav .quick-more .dropdown

@media screen规则中选择器的主题是a

.dropdown li a

因为每个选择器都匹配一个不同的元素，所以特性不会发挥作用。您的规则适用于.dropdown元素，而本机默认值则应用于其中的a元素。这就是为什么你看到这两种规则都在适用的原因。由于font-size值以像素为单位，a元素将继续具有12像素的字体大小。

复制li a部分并不脆弱；它是解决这类问题的适当解决方案(如果不是唯一的解决方案)。级联发生在每个元素的基础上，如果您没有处理相对值或继承，那么针对错误的元素将不会像您预期的那样工作。

此外，screen是一个媒体类型 (更广泛地说是一个媒体查询)，而不是选择器，@media规则不会影响级联，只会根据媒体是否应用于浏览器而启用或禁用它们内部的规则。

Answer 2

据我所知，媒体查询的正确语法是：

@media screen { .dropdown li a { font-size: 12px; } }

这应该能解决你的问题。

参见这些提示，第一个使用正确的媒体查询语法：

http://jsfiddle.net/SE6fP/

下一个使用示例所使用的不正确语法。

http://jsfiddle.net/SE6fP/1/

此外，对于那些不确定CSS如何工作的人，这里有一些CSS的细节：

CSS的特殊性遵循规则集，并为每个选择器生成一个分数。

有可用的计算器工具，它将解释任何给定规则的具体值。

http://www.w3.org/TR/CSS21/cascade.html#specificity说，使用了以下规则：

选择器的特异性计算如下：

• 如果声明来自' style‘属性，而不是带有选择器的规则，则0否则(= a) (在HTML中，元素的“样式”属性的值是样式表规则)。这些规则没有选择器，因此a=1、b=0、c=0和d=0。
• 计数选择器中的ID属性数(= b)
• 计数选择器中其他属性和伪类的数量(= c)
• 计算选择器中元素名和伪元素的数量(= d)

其特异性仅以选择器的形式为基础。特别是，表单"id=p33“的选择器被计算为属性选择器(a=0、b=0、c=1、d=0)，即使id属性在源文档的DTD中被定义为"ID”。