CSS属性优先的原因?

时间:2009-03-23 00:04:58

标签: css standards

我实际上知道浏览器如何呈现以下示例(基于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>

我们再一次有蓝色文字。

这种方法有特定原因吗?

(抱歉标题不清楚,这是我能管理的最好的。)

5 个答案:

答案 0 :(得分:2)

W3C的detailed explanation具有CSS应该级联和优先的准确性。对于您的确切情况,这是正在发生的事情:

  1. 虽然“color”是一个继承属性,但内部选择器以span本身为目标,因此它优先。

  2. 由于它们现在都以span为目标,因此更具体的(id选择器)现在优先。

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

答案 1 :(得分:2)

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

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

在示例3 中,我们再次调用CSS Cascade规则,因为两个特性相同,所以最后一条规则获胜。

请注意,在这种情况下:

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

文字为蓝色。这是因为第二个规则直接针对元素,因此不会调用CSS Cascade。

更多阅读:

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

答案 2 :(得分:1)

我希望这个解释有所帮助:

EX 1)因为这些是一般规则,所以它应用直接父.inner

的颜色

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

EX 3)因为2条规则同样具体,所以选择最后一条规则

达科

答案 3 :(得分:0)

级联(CSS中的'C')定义明确,可以明确定义哪些规则优先(包括允许重要的,用户和代理规则)。

但规则也不简单(与指定大型层次结构的复杂匹配)。

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

答案 4 :(得分:0)

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

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

在第三个示例中,两种样式也适用于范围。因为它们具有相同的特异性,所以最后一种风格优先于它,因为它是最后一种。

您可以详细了解如何确定优先级here