标签：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> <body> <!-- 派生选择器实例 --> <a>这是一个div外部a标签的样式</a> <div> <a>这是一个div内部a标签的样式</a> <h2>css基础语法</h2> </div> <!--id选择器与派生选择器实例 --> <a href="https://www.baidu.com/" > 百度不变色</a> <div id="divid"> <a href="https://www.baidu.com/" >百度变色</a> </div> <br /> <!--类选择器--> <div id="divclass" class="divclss"> div类选择器实例 </div> <br /> <!--属性选择器--> <p title="t1"> 属性选择器</p> <!--和body指定的颜色一样--> <p title="t2"> 属性选择器</p> </body> </html>
h2,a,h1{ color:red; } body{ color:yellow; } div a{ color: blue; } #divid a{ color:darkred; } .divclss{ color:chartreuse; } [title = t1] { color: mediumvioletred; } /*这个要按顺序来*/ div a:link {color:blue;} div a:visited {color:blue;} div a:hover {color:red;} div a:active {color:yellow;} /*id选择器的优先级比类型选择器优先级高*/
效果截图：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*标签选择器*/ div { color: blue } /*绿色*/ /*类选择器*/ .a1 { color:yellow } /*黄色*/ /*类派生选择器*/ .a1 div {color:purple} /*紫色*/ /*id选择器*/ #id1{ color: cyan} /*青色*/ #id2{ color: cyan} /*青色*/ #id3{ color: cyan} /*青色*/ /*id派生选择器*/ #id2 div{ color: red} /*红色*/ </style> </head> <body> <div id="id1" class="a1"> 我是青色的 id选择器优先级高于类选择器 </div> <div class="a1"> <div class="a1">我是紫色的 类派生选择器优先级高于所有类选择器</div> <div id="id2">我是青色的 id选择器优先级高于类派生选择器 <div id="id3"> 我是红色的而不是青色的 id派生选择器优先级高于id选择器 </div> </div> </div> </body> </html>
效果图：
（原博客地址 ： http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_1 ）
计算指定选择器的优先级:重新认识CSS的权重
使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。
从上面我们可以得出两个关键的因素：
一篇文章 256个class类名选择器干掉一个id选择器实例页面
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘，溢出到id区域。
总结：
比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。
选择器种类
查阅资料归纳下大概有如下几种：
通配选择器
类型选择器
ID选择器
类选择器
包含选择器
子元素选择器
相邻兄弟选择器
属性选择器
css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到
关于CSS的执行效率：
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序：
1.id选择器（#myid）2.类选择器 （.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低、
详细的介绍大家还可以点击Writing efficient CSS selectors。
标签：
原文地址：http://www.cnblogs.com/lipeng0824/p/4390963.html
