css权重

做前端有好几年了，依然觉得CSS样式并没表面看到的那么容易，值得深入的东东太多，于是最近准备好好看看css相关的书籍，今天翻看web标准解决方案时看到了样式权重计算方式，以前在网上看到过，但是也忘的差不多，今特记录如下：

样式一般通过选择器来找相应的样式的应用元素，当然还有行内样式是个例外，而选择器除非有如下几种：ID，样式，元素（类型选择器），伪类，伪元素，属性选择器，我们可以把选择分为4个等级，同时以10为基数：a(行内样式的数量),b(ID选择器的数量)

,c(类，伪类，属性选择器的数量),d(类型选择器，伪类选择器的数量)，得出的数值代表当前选择器的权重。

假设当前等级为1,1,0,0则计算的权重为1100。

 

下面来看看几个计算示例：

style="" 的权重计算为1,0,0,0，权重为1000

#wraper #content{}的权重计算为0,2,0,0，权重为200

#content .datePosted{}的权重计算为0,1,1,0，权重为110

p.conment .dateposted{}的权重计算为0,0,2,1，权重为21

div p{}的权重计算为0,0,0,2，权重为2

 

这样就很从数字判断当前样式的权重了，有一种特殊情况要稍加留意，就是当样式后加有!important时，它的样式始终是最高权重的，还有就可继承的样式，像字体颜色，大小什么的，继承的始终小于当前元素被直接赋予的样式。

写到这里我相信在以后样式权重分析的时候可以得心应手了。

附上我自己随便写的一测试DOME:点击进入