CSS 继承、层叠和特指度

 

版权所有，转载请注明来源http://qyj.iteye.com，违者必究！

 

//css样式
div{
 background-color:red;
 font-size:12px;
 color:white;
}

//html代码
<div>
 <p>welcome qyj.iteye.com</p>
</div>

 这个页在渲染后，本来是应用给DIV的样式也被应用到段落，样式被继承了，因为p是div的后代。

继承是CSS中一个非常重要的特征。子元素因此会拥有父元素的特征。

 

之所有称CSS样式为层叠样式表，因为选择符会从上到下按照层叠关系匹配。即：假如多个选择符都给一个元素应用了样式，那么后定义的规则就会覆盖先定义的规则。

//css样式
p{
 color : red;
}

p{
 color : green;
}

//html代码
<p>welcom qyj.iteye.com</p>

 最终渲染完毕后段落的颜色为：green。

 

后定义的规则一般会覆盖先定义的规则，但也不全是。这里就涉及一个特指度的问题，看代码

//css样式
p.highlight{
 color : red;
}

p{
 color : green;
}

//html代码
<p class="highlight">welcom qyj.iteye.com</p>

 最终渲染后段落颜色为：red，p.highlight是一个更具体的选择符。假如两个选择符具有相同的特指度，这时后定义的才会胜出。