码迷,mamicode.com
首页 > Web开发 > 详细

css层叠 权重

时间:2018-07-22 11:34:37      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:运行   表示   现在   info   规则   优先   优先级   重要   否则   

权重决定了哪一条规则会被浏览器应用在元素上

层叠的过程
比较优先级:优先级低,淘汰,优先级高,胜出,相同则比较特殊性
比较特殊性:特殊性低,淘汰,特殊性高,胜出,并列则比较源次序
比较源次序:源次序靠前,淘汰,源次序靠后,胜出
若属性值后跟上!important,则表示是一条重要声明

技术分享图片

这里将选择器分为了a b c d四类  若选择器中有style 则a类加1 否则为0

如:两个不同的选择器都选中了同一个p标签    

#main .content p{

          color:green;

  }

这里#main是id选择器 则b类加1,  .content  为class选择器 则c类加1,  p是元素 则d类加1  最终结果为{0,1,1,1}

a:hover p{

  color:red;

}

这里a:hover为伪类 则c类加1  , p是元素 则d类加1  最终结果为{0,0,1,1}

现在比较两个数组{0,1,1,1}和{0,0,1,1}   显而易见  {0,1,1,1}要大  则运行#main .content p中的样式  


优先级:!important>style>id>class>元素>*

 

另一种较简单的方式权重记忆口诀

!important   正无穷大

一个行内样式   +1000

一个id   +100

一个属性选择器/class或者伪类   +10

一个元素名或者伪元素   +1

算出来的最终结果值最大则运用谁的样式

如果值相同 则使用后出现的选择器的样式

css层叠 权重

标签:运行   表示   现在   info   规则   优先   优先级   重要   否则   

原文地址:https://www.cnblogs.com/zms-cyh/p/9349071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!