CSS特性

css权重

1、概念：不同选择器当匹配到同一个标签并且对同一个css属性设置是，因为涉及到css属性的最终归属问题，css就提供了一套权重机制，根据权重的大小来决定css最终的归属。

2、权重的计算方式

加法：给每一种基础的css选择器（id，clsss，标签，伪类）设置不同的数字，权重的数值就等于使用的选择器权值之和

• 权值分配：id：100；clsaa：10；标签、伪类：1

html：
<ul id="list" class="list"></ul>
css
body .list ul{
    color:red;    
}
#list ul{
    color:green;
}
/*
body .list ul:1+10+1=12
#list ul:100+1   ------------权重更大
*/

4个0：是依次比较基础选择器的数量多少来决定权重的大小

• 权重大小：行内样式>id选择器>class选择器>标签选择器
• 从左往右开始对比，有一个比值不相等就结束，除非相等才比较下一种选择器的数量

html：
<ul id="list" class="list"></ul>
css
body .list ul{
    color:red;    
}
#list ul{
    color:green;
}
/*
body .list ul:(0,0,1,2)
#list ul:(0,1,0,1)------------权重更大
*/