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>

我希望使用font-size 14px设置选项文本的样式;原生默认值为12px。

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

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

但是，在菜单中呈现链接时，他们的原生规则仍然胜出：

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

在Chrome中，我可以看到在菜单中渲染链接时会考虑这两个规则，但是他们的规则（比我的声明更早）获胜。我对此感到困惑，因为我认为我对特异性有很好的处理。所以，我checked my understanding rules并手动calculated两个规则的权重。

我有特异性0131（0个内联样式，1个ID，3个类，1个元素名称）。

Native具有特异性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 type（更广泛地是media query），而不是选择器，@media规则不会影响级联，除了启用或根据媒体是否适用于浏览器，禁用其中的规则。

Answer 2

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

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

这可以解决您的问题。

请参阅这些小提琴，第一个使用正确的媒体查询语法：

http://jsfiddle.net/SE6fP/

下一个使用示例

使用的错误语法

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

另外，对于那些不确定它是如何工作的人来说，这里有一点关于CSS的特殊性：

CSS特定遵循规则集并为每个选择器生成分数。

有calculator tools可用，它将解释任何给定规则的特定值。

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

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


如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，为   element的“style”属性是样式表规则。这些规则没有   选择器，所以a = 1，b = 0，c = 0，d = 0.）

计算选择器（= b）
中的ID属性数
计算选择器（= c）
中其他属性和伪类的数量
计算选择器中的元素名称和伪元素的数量（= d）


特异性仅基于选择器的形式。在   特别是，“[id = p33]”形式的选择器被计为   属性选择器（a = 0，b = 0，c = 1，d = 0），即使id属性是   在源文档的DTD中定义为“ID”。

CSS选择器特异性比较

2 个答案: