学习课程,里面讲到了标签的权值,我认为有必要记录一下,因为新学者容易弄混,现将原文摘抄如下,温故知新吧.

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码&＃xff0c;那么元素会启用哪一个CSS样式呢?我们来看一下面的代码&＃xff1a;

p{color:red;}

.first{color:green;}

三年级时&＃xff0c;我还是一个胆小如鼠的小女孩。


p和.first都匹配到了p这个标签上&＃xff0c;那么会显示哪种颜色呢&＃xff1f;green是正确的颜色&＃xff0c;那么为什么呢&＃xff1f;是因为浏览器是根据权值来判断使用哪种css样式的&＃xff0c;权值高的就使用哪种css样式。

下面是权值的规则&＃xff1a;

标签的权值为1&＃xff0c;类选择符的权值为10&＃xff0c;ID选择符的权值最高为100。例如下面的代码&＃xff1a;

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1&＃43;1&＃61;2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1&＃43;1&＃43;10&＃61;12*/

#footer .note p{color:yellow;} /*权值为100&＃43;10&＃43;1&＃61;111*/

注意&＃xff1a;还有一个权值比较特殊--继承也有权值但很低&＃xff0c;有的文献提出它只有0.1&＃xff0c;所以可以理解为继承的权值最低。