我实际上知道浏览器如何呈现以下示例(基于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>
我们再一次有蓝色文字。
这种方法有特定原因吗?
(抱歉标题不清楚,这是我能管理的最好的。)
答案 0 :(得分:2)
W3C的detailed explanation具有CSS应该级联和优先的准确性。对于您的确切情况,这是正在发生的事情:
虽然“color”是一个继承属性,但内部选择器以span本身为目标,因此它优先。
由于它们现在都以span为目标,因此更具体的(id选择器)现在优先。
它们现在同样具体,因此后来出现的声明优先。
答案 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。