CSS的优先级与权重计算
定义CSS样式时，经常出现两个或更多选择器选择在同一元素上，这时就会出现优先级的问题。
一、基本选择器优先级比较：
父元素继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:其中!important只有作用于某个属性,提高某个属性的优先级!
设置同个CSS属性时,优先级高会覆盖优先级低的!设置不同的CSS属性,就不会有优先级问题!
案例源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 基本选择器优先级比较：*/
/* 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important */
/*
!important语法格式
css属性:css属性值 !important;
*/
/*
使用!important一定要注意以下几点
1.!important它是提升的属性的权重，而不是提升选择器的优先级！
2.!important它只能提升作用于自己身上的属性，并不能提升继承过来属性的权重！
*/
#div2{
color:skyblue;
}
.div1{
color:pink;
}
div{
color:orange !important;
}
*{
color:blue;
}
body{
color:red;
}
</style>
</head>
<body>
<div class='div1' id='div2' style='color:green;'>div的内容</div>
</body>
</html>
权重计算:
复合选择器的权重计算： （0 0 0 0）
从左到右：
第一个0表示!important的个数
第二个0表示id选择器的个数
第三个0表示类选择器或伪类的个数
第四个0表示标签选择器的个数
比较方法：从左往右：如果第一个0大，表示这个选择器的权重高，那么使用这个选择器的样式，后面不用比较，如果第一个0相等，那么继续比较第二个0，如果第二个0大，那么就是这个选择器的权重高，使用他的样式，如果相等，继续往下比较，依次类推。
案例源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
复合选择器我们不叫优先级了,我们称之为权重
复合选择器的权重计算： (0 0 0 0)
从左到右：
第一个0表示!important的个数
第二个0表示id选择器的个数
第三个0表示类选择器或伪类的个数
第四个0表示标签选择器的个数
比较方法：从左往右：如果第一个0大，表示这个选择器的权重高，那么使用这个选择器的样式，后面不用比较，如果第一个0相等，那么继续比较第二个0，如果第二个0大，那么就是这个选择器的权重高，使用他的样式，如果相等，继续往下比较，依次类推
*/
/*
如果复合选择器权重相等的时候,应该考虑层叠性
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的
2） 如果没有选中，那么权重是0，因为继承的权重为0
*/
/*(0 1 1 0)*/
.father #son2{
color:purple;
}
/*(0 0 2 0)*/
.father .son1{
color:orange;
}
/*(0 0 1 0)*/
.father{
color:red;
}
/*(0 0 1 1)*/
.father div{
color:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1" id="son2">son的内容</div>
</div>
</body>
</html>
