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:点击进入

原文地址:https://www.cnblogs.com/xwwin/p/6423694.html