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;}就会继承而不是用户代理的默认样式