html内容权重计算,HTMLCSS选择器权重计算规则
其实，CSS有⾃⼰的优先级计算公式，⽽不仅仅是⾏间>内部>外部样式；ID>class>元素。
⼀、样式类型
1、⾏间
我的⾏间CSS样式。
2、内联
h1{font-size:12px;
color:#000;
}
3、外部
css 属性选择器⼆、选择器类型
1、ID  #id
2、class  .class
3、标签  p
4、通⽤  *
5、属性  [type="text"]
6、伪类  ：hover
7、伪元素  ::first-line
8、⼦选择器、相邻选择器
三、权重计算规则
第⼀等：代表内联样式，如: style=””，权值为1000。
第⼆等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、⼦选择器、相邻选择器等的。如*、>、+，权值为0000。
继承的样式没有权值。
四、⽐较规则
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级⽐较，前⼀等级相等才往后⽐。
⽆论是⾏间、内部和外部样式，都是按照这个规则来进⾏⽐较。⽽不是直观的⾏间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实⾏间为第⼀等的权重，所以它的权重是最⾼的。⽽内部样式可能⼀般写在了外部样式引⽤了之后，所以覆盖掉了之前的。
在权重相同的情况下，后⾯的样式会覆盖掉前⾯的样式。
通配符、⼦选择器、相邻选择器等的。虽然权值为0000，但是也⽐继承的样式优先。
五、！important
1、!important 的作⽤是提升优先级，换句话说。加了这句的样式的优先级是最⾼的(⽐内联样式的优先级还⾼)。
p{
color:red !important;
}
我显⽰红⾊
2、ie7+和别的浏览器对important的这种作⽤的⽀持度都很好。只有ie6有些bug p{
color:red !important;
color:blue;
}//会显⽰blue
但是这并不说明ie6不⽀持important，只是⽀持上有些bug。看下⾯
p{
color:red !important;
}
p{
color:blue;
}
//这样就会显⽰的是red。说明ie6还是⽀持important的。
六、实例
a{color: yellow;} /特殊性值：0,0,0,1/
div a{color: green;} /特殊性值：0,0,0,2/
.demo a{color: black;} /特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;} /特殊性值：0,0,2,1/
.
demo [type="text"]{color: grey;} /特殊性值：0,0,2,0*/
demo a{color: orange;} /特殊性值：0,1,0,1/
div#demo a{color: red;} /特殊性值：0,1,0,2/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。