特殊性

标签：header   样式   冲突   inline   style   span   tle   log   示例   

每个元素可以被多个选择器匹配，那么样式冲突的时候怎么决定用哪个样式呢？

每个选择器都有特殊性，冲突时，特殊性高的样式胜出。

规则

特殊性值表示为4个部分，如：0,0,0,0

具体规则如下：

• ID选择器0,1,0,0
• 类选择器、属性选择器、属性值选择器、伪类0,0,1,0
• 元素选择器、伪元素选择器0,0,0,1
• 结合符( >、+ )、通配选择器0,0,0,0
• 内联样式(style="color:red;")1,0,0,0
• !important;比没有!important的大上不封顶
• 继承的样式没有特殊性

示例

/* 0,0,0,1 */
h1{
    color:red;
}

/* 0,0,0,2 */
p em{
    color:red;
}

/* 0,0,1,0 */
.wrap{
    color:red;
}

/* 0,1,0,0 */
#top{
    color:red;
}

/* 0,0,2,2 */
p.header p.title{
    color:red;
}

/* 0,1,1,1 */
div#top *[href]{
    color:red;
}

特殊性

标签：header   样式   冲突   inline   style   span   tle   log   示例   

原文地址：http://www.cnblogs.com/abelverycool/p/6771616.html