标签：
css选择器有三个特性：特殊性，继承性，层叠性。
自己的理解如下：
特殊性：
表现在权重上
0 0 0 0
第一个0代表行内元素；
第二个0代表ID；
第三个0代表class；
第四个0代表元素或伪类；
例子：<p style="color:red;">silence</p> 这个就是1 0 0 0
#id{color:blue;}这个是0 1 0 0
.class{color：orange;} 这个是0 0 1 0
p{color:black;}这个是0 0 0 1
p#id 0 1 0 1
p.class 0 0 1 1
p span 0 0 0 2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://code.jquery.com/jquery-latest.min.js"></script> 5 </head> 6 <style type="text/css"> 7 #dd{color: orange; } 8 .text{color: blue; } 9 div{color: red;} 10 div#dd{color:pink;} 11 </style> 12 <body> 13 <div class="text" id="dd">Hi, hi,hi , hi,hihi hi hi,I like him ,he has a history</div> 14 </body> 15 </html>
这个字体的颜色为权重最高的，结果是pink色。
继承性：
子元素可以继承父元素的属性，父元素不能继承子元素的属性。
注意的是：1. html是body的父元素，但可以继承body的属性，这是一个例外，因为body可以看做是根元素；
2.有些属性是不能继承的。如框模型属性（外内边距，背景，边框）
层叠性
!important>行内元素 > <style></style> > 外部引用的css样式
如果上下都出现同一元素的同一属性，则后出现的优先级高
p.aa{color:red;}
p.aa{color:blue;} 则class为aa的p标签里的内容是blue色；
还有一个是创作人员样式》读者的样式
p em{color:black;}/*author style*/
p em{color:blue;}/*reader style*/
颜色为black
加重要声明后读者的样式》创作人员的样式
p em{color:black!important;}/*author style*/
p em{color:blue!important;}/*reader style*/
颜色为blue；
注意的是
#id的权重为0 1 0 0；
p[id=‘‘]的权重为0 0 1 0；
a的color会根据浏览器的首选项设置来应用样式；所以有时候a的颜色不能继承父级颜色而是浏览器默认的颜色
a{color:inherit;}就会继承而不是用户代理的默认样式
标签：
原文地址：http://www.cnblogs.com/MissBean/p/4305348.html
