CSS属性优先的原因？

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

#外部span{颜色：红色；}
.内部span{颜色：蓝色；}
测试

文本现在是红色的

最后，试试这个

<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>

#外部span{颜色：红色；}
#内部span{颜色：蓝色；}
测试

我们再次看到蓝色文本

这种方法有具体的原因吗

---

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

我希望这个解释能有所帮助：

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

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

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

---

Darko

我希望这个解释有助于：

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

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

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

Darko

级联（CSS中的“C”）定义良好，可以清楚地定义哪些规则优先（包括重要规则、用户规则和代理规则）

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

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

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

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

---

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

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

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

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

---

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

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

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

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

您可以阅读更多关于优先权是如何确定的。

W3C对CSS应该如何级联和优先有一个明确的定义。就您的具体情况而言，发生的情况如下：

虽然“颜色”是继承的属性，但内部选择器以范围本身为目标，因此它具有优先权

由于它们现在都以跨度为目标，因此更具体的跨度（id选择器）现在优先

它们现在都同样具体，因此后面出现的声明优先

W3C对CSS应该如何级联和优先有一个明确的定义。就您的具体情况而言，发生的情况如下：

虽然“颜色”是继承的属性，但内部选择器以范围本身为目标，因此它具有优先权

由于它们现在都以跨度为目标，因此更具体的跨度（id选择器）现在优先

它们现在都同样具体，因此后面出现的声明优先

---

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

在示例2中span元素是这两个规则的直接目标，因此我们必须查看以元素为目标的规则，以确定哪个规则最具体。带有ID选择器的规则获胜

在示例3中我们再次调用CSS级联规则，由于这两种特殊性相同，最后一条规则获胜

请注意，在这种情况下：

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

文本将是蓝色的。这是因为第二条规则直接以元素为目标，因此不调用CSS级联

更多阅读：

---

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

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

在示例2中span元素是这两个规则的直接目标，因此我们必须查看以元素为目标的规则，以确定哪个规则最具体。带有ID选择器的规则获胜

在示例3中