1

我正在重新设计第三方平台（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>

我希望设置字体大小为 14px 的选项文本；本机默认值为 12px。

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

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

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

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

在 Chrome 中，我可以看到在菜单中呈现链接时会考虑这两个规则，但它们的规则（比我的更早声明）获胜。我对此感到困惑，因为我认为我对特异性有很好的把握。所以，我检查 了我对 规则的理解，并手动计算了两个规则的权重。

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

Native 具有特异性 0032（0 个内联样式，0 个 ID，1 个类，2 个元素名称）。（我不确定如何计算媒体选择器在原生规则中的贡献。）

我不在乎您使用什么基础进行数学运算，“0131”大于“0032”。所以，我的规则应该赢。

是的，我可以轻松复制出现在原生规则中的元素链（即“.dropdown li a”），但我认为这是一种脆弱的方法，我认为尽可能广泛地设置样式属性以促进可扩展性很重要并且作为防止在裂缝之间偷看的原生样式的预防措施。

感谢您对解决此问题的任何帮助。我显然有可行的替代方案，所以我在这里要求的是对这两条规则在 CSS 加权系统中的影响的学术解释。

非常感谢。

4

2 回答 2

2

您的选择器的主题是.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规则不会影响级联，除了根据媒体是否适用于浏览器来启用或禁用其中的规则。

于 2013-09-20T15:30:02.793 回答
1

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

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

这应该可以解决您的问题。

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

http://jsfiddle.net/SE6fP/

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

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

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

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

有可用的计算器工具可以解释任何给定规则的特异性值。

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

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

  • 计数 1 如果声明来自是“样式”属性而不是带有选择器的规则，否则为 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 属性被定义为“ID " 在源文档的 DTD 中。

于 2013-09-20T15:08:20.310 回答