标签:
一、什么是CSS优先级?
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
1、每个具有style=“”,权重为1000
2、每个ID选择符(#someid),权重为100
3、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加权重为10
4、每个元素或伪元素(:firstchild)等,加权重为1
5、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。
6、出现!important 权重最高!!!
7、
三、具体例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> #text{color: red} .text{color: blue;} </style> </head> <body> <div id="text" class="txt"> <p> <span>测试文字</span> </p> </div> </body> </html>
测试结果为 red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> div.txt p span{color: orange} .txt p span{color: red} .txt1 span{color: blue} </style> </head> <body> <div id="text" class="txt"> <p class="txt1"> <span>测试文字</span> </p> </div> </body> </html>
测试结果为 orange
标签:
原文地址:http://www.cnblogs.com/yanwei-sun/p/5197478.html