1

我实际上知道浏览器倾向于如何呈现以下示例（基于 Opera 9.5 和 Firefox 3.0 的结果），但我不明白它们背后的原因。

举这个例子，

<style type="text/css">
#outer{color:red;}
.inner{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

结果是蓝色文本。

但是，现在看这个例子，

<style type="text/css">
#outer span{color:red;}
.inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

文本现在是红色的。

最后试试这个

<style type="text/css">
#outer span{color:red;}
#inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

我们再次有蓝色文本。

这种方法有特定的原因吗？

（抱歉标题不清楚，这是我能做到的最好的。）

4

5 回答 5

2

W3C详细解释了 CSS 应该如何级联和优先。对于您的确切情况，这就是正在发生的事情：

  1. 虽然 "color" 是一个继承属性，但内部选择器以 span 本身为目标，因此它具有优先权。

  2. 由于它们现在都以 span 为目标，因此更具体的一个（id 选择器）现在优先。

  3. 它们现在都同样具体，因此稍后出现的声明优先。

于 2009-03-23T00:24:48.350 回答
2

在示例 1中，span 元素不是直接定位的，因此我们必须研究如何处理CSS 继承。颜色是一个继承属性，所以我们需要查看 span 的最近父元素来确定颜色。在您的示例 1 中，类 (.inner) 定义了蓝色并将该继承传递给跨度。

在示例 2中，两个规则都直接针对 span 元素，因此我们必须查看CSS Cascade以确定针对该元素的哪些规则最具体。具有 ID 选择器的规则获胜。

在示例 3中，我们再次调用 CSS Cascade 规则，并且由于两个特性相同，最后一个规则获胜。

请注意，在这种情况下：

 #outer {color: red; }
 span {color: blue; }

文本将是蓝色的。这是因为第二条规则直接针对元素，因此不调用 CSS Cascade。

更多阅读：

注意和披露：我撰写了第三篇博文。

于 2009-03-23T01:42:31.533 回答
1

我希望这个解释有帮助：

EX 1）因为这些是一般规则，所以它应用直接父级 .inner 的颜色

EX 2) ID 比类更具体（因为只有一个元素具有给定 ID）因此 id 选择器被认为更具体和重要

EX 3）因为这两条规则同样具体，所以它选择最后一条规则

达科

于 2009-03-23T00:09:57.433 回答
0

级联（CSS 中的“C”）定义明确，可以明确定义哪些规则优先（包括允许重要的、用户和代理规则）。

但规则也不简单（具有指定大层次结构的复杂匹配）。

级联的最后一步是声明的文档顺序，最后获胜。

于 2009-03-23T00:15:19.247 回答
0

在第一个示例中，第一个样式适用于外部 div。内部 div 然后继承此样式，但第二种样式适用于内部 div，因此它会覆盖继承的样式。

在第二个示例中，两种样式都适用于跨度。第一种样式优先，因为 id 比类更具体。

在第三个示例中，两种样式也适用于跨度。由于它们具有相同的特异性，因此最后一种样式优先，因为它是最后一种。

您可以在此处阅读有关如何确定优先级的更多信息。

于 2009-03-23T00:22:52.410 回答