选择器样式覆盖
来源：8-10 给选择器分个组 - 分组选择器
kevine099
2016-04-07 12:07
<style type="text/css">
h1,span{color:red;}
.first,#second>span{color:blue;}
</style>
为什么设置了.first的样式为蓝色后，.first里面的子选择器span仍旧是红色呢？这两个真正的样式到底是怎样一种规定？
写回答
关注
4回答
-
- 用户nlk9a8o0e0
- 2016-04-07 21:53:37
回复 kevine099：好吧我看错了，有一个名词你得知道，叫做特殊性，相关内容你可以看第九章的内容或者看《CSS权威指南》的第三章。简单地说，当样式选择存在竞争时，特殊性高的会胜出。
span{color:blue;}这里的样式的特殊性为0,0,0,1 而继承值根本没有特殊性（注意没有特殊性比特殊性为0还要低）！！所以span从h1里继承的样式会被另外一个样式干掉。
这样说可以么，我怕我说的不够简练
-
- 用户nlk9a8o0e0
- 2016-04-07 22:16:23
我再举一个简单的例子来说明继承父类的值的特殊性真的很低
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> body{ color:red; } </style> </head> <body> <p> aaaaaaaaaa<a href="www.baidu.com">baidu</a>aaaaaaaaaa </p> </body> </html>这是一个很简单的例子，给body设置样式color:red; 但是效果是这样的
在这里我并没有对<a>标签进行任何处理，为什么它还是变蓝了，因为浏览器会默认给<a>一个样式
a:link{color:blue;}所以链接的颜色还是蓝色并没有变红
-
- 用户nlk9a8o0e0
- 2016-04-07 12:32:17
.first,#second>span{color:blue;}你这样.first里面的子选择器span当然是红色的，#second>span这个是选择id为second元素的span子选择器，id为second的只有第二段，当然就第二段里的span是蓝色的
.first,span{color:blue;}这样所有的就是蓝色的了
-
- 著名神经刀
- 2016-04-07 12:25:40
.first,span{ color:green;}
#second span{ color:green;}
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225809 学习 · 18234 问题
相似问题