CSS 选择器的优先级
优先级的顺序：行内样式>id选择器>类选择器>标签选择器>*通配符选择器>继承
[html] view plain copy <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { /*通配符选择器*/ color: pink; } body { /*继承*/ color: green; } div { /*标签选择器*/ color: blue; } .d1 { /*类选择器*/ color: yellow; } #d2 { /*id选择器*/ color: purple; } </style> </head> <body> <!--行类样式--> <div style="color: red " class="d1" id="d2">优先级</div> </body> </html>
[html] view plain copy <span style="font-family:Microsoft YaHei;font-size:12px;"> 但是优先级有个变数就是important,它可以改变选择器的优先级，如果在某个样式后面添加了important后，该选择器的优先级就会最高，例如：还是如上代码，给类选择器添加important后，字体颜色就会变成黄色。</span>
[html] view plain copy
<pre class="html" name="code">.d1 { /*类选择器*/
color: yellow !important;
接下来讲优先级的权重，
权重算法：（0， 0， 0， 0）
第一个0对应着important的个数，
第二个0对应着id选择器的个数
第三个0对应着类选择器的个数
第四个0对应着标签选择器的个数
比较方法：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，则比较第二个，依此类推。
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div div { /*(0, 0, 0, 2)*/
color: red;
}
div .son { /*(0, 0, 1, 1)*/
color: blue;
}
div #son {/*(0, 1, 0, 1)*/
color: pink;
}
.father div {/*(0, 0, 1, 1)*/
color: yellow;
}
.father .son {/*(0, 0, 2, 0)*/
color: green;
}
.father #son {/*(0, 1, 1, 0)*/
color: purple;
}
#father div {/*(0, 1, 0, 1)*/
color: gray;
}
</style>
</head>
<body>
<div class="father" id="father">
<div class="son" id="son">权重</div>
</div>
</body>
</html>
通过权重的算法我们可以很快的得知最后字体的颜色为紫色
如果给下面的样式添加了!important，则权重变成最高，字体颜色将为绿色
[html] view plain copy
.father .son {/*(1, 0, 2, 0)*/
color: green !important;
}
最后说一下选择器的工作原理
选择器在查找元素的时候不是从左往右找，而是从右往左找
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*从左往右找*/
div div { /*先找到一个子元素标签为div,然后再找这个元素是否有一个父元素标签也为div*/
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>
文字
<div>
<div>
文字
<div>文字</div>
</div>
</div>
</body>
</html>
结果显而易见是：蓝，红，红
