选择器样式覆盖

源自：8-10 给选择器分个组 - 分组选择器

选择器样式覆盖

h1,span{color:red;}

.first,#second>span{color:blue;}

</style>

为什么设置了.first的样式为蓝色后，.first里面的子选择器span仍旧是红色呢？这两个真正的样式到底是怎样一种规定？

提问者：kevine099 2016-04-07 12:07

个回答

用户nlk9a8o0e0

2016-04-07 21:53:37

已采纳

回复 kevine099：好吧我看错了，有一个名词你得知道，叫做特殊性，相关内容你可以看第九章的内容或者看《CSS权威指南》的第三章。简单地说，当样式选择存在竞争时，特殊性高的会胜出。
```
span{color:blue;}
```
这里的样式的特殊性为0,0,0,1 而继承值根本没有特殊性（注意没有特殊性比特殊性为0还要低）！！所以span从h1里继承的样式会被另外一个样式干掉。
这样说可以么，我怕我说的不够简练

0
用户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;}
```
所以链接的颜色还是蓝色并没有变红

0
用户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;}
```
这样所有的就是蓝色的了

0
著名神经刀

2016-04-07 12:25:40

.first,span{ color:green;}
#second span{ color:green;}

0