参考博客：
http://www.cnblogs.com/yuanchenqi/articles/6856399.html
css属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*.c1[po*="p"]{*/ /*color: red;*/ /*}*/ /*[po="p1 p"]{*/ /*color: green;*/ /*}*/ /*.c1{*/ /*color: red;*/ /*}*/ /*.btn{*/ /*font-size: 30px;*/ /*}*/ </style> </head> <body> <div po="p1 p" class="c1 btn">p1</div> <!--这个class有两个值，即等于c1又等于btn--> <div po="p2 p" class="c1">p2</div> <div class="c1">p3</div> </body> </html>
css优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*div{*/ /*color: red;*/ /*}*/ /*#id1{*/ /*background-color: blueviolet;*/ /*}*/ /*.d2{*/ /*background-color: bisque;*/ /*}*/ /*div{*/ /*background-color: darkblue;*/ /*}*/ /*#id1 .p1{*/ /*color: darkcyan;*/ /*}*/ /*div p{*/ /*color: green;*/ /*}*/ /*.d1 p{*/ /*color: red;*/ /*}*/ /*.p1{*/ /*color: sienna;*/ /*}*/ /*.d1 .p2{*/ /*color: red;*/ /*}*/ .d1 .c2 .p2{ color: green; } .p2{ color: red!important; } </style> </head> <body> <!--<div class="d1 d2" id="id1" style="background-color: green">--> <div class="d1 d2" id="id1"> DIV <p class="p1">PPP</p> <div class="c2"> <div class="c3"> <p class="p2">inner</p> </div> </div> </div> <p>hello</p> <span>span</span> </body> </html>
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
