                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

选择器样式覆盖

h1,span{color:red;}

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

</style>

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

kevine099

2016-04-07

源自：初识HTML(5)+CSS(3)-升级版 8-10

关注问题我要回答

1154

操作

收起

4 回答

用户nlk9a8o0e0 回答被采纳 +3 积分
2016-04-07

回复 kevine099：好吧我看错了，有一个名词你得知道，叫做特殊性，相关内容你可以看第九章的内容或者看《CSS权威指南》的第三章。简单地说，当样式选择存在竞争时，特殊性高的会胜出。

span{color:blue;}

这里的样式的特殊性为0,0,0,1 而继承值根本没有特殊性（注意没有特殊性比特殊性为0还要低）！！所以span从h1里继承的样式会被另外一个样式干掉。

这样说可以么，我怕我说的不够简练

0 回复有任何疑惑可以回复我~

收起回答

用户nlk9a8o0e0

换句话说，只要对一个元素进行了样式处理，哪怕是通过通配选择器（统配选择器的特殊性为0），它的级别都会高于从父类继承值的特殊性。

2016-04-07 回复有任何疑惑可以回复我~

kevine099 提问者回复用户nlk9a8o0e0

你的意思是说span的颜色显示为外层p样式是属于继承，而继承的优先级最低是吧？

2016-04-07 回复有任何疑惑可以回复我~

用户nlk9a8o0e0 回复 kevine099 提问者

可以这么说

2016-04-08 回复有任何疑惑可以回复我~

查看1条回复

用户nlk9a8o0e0
2016-04-07

我再举一个简单的例子来说明继承父类的值的特殊性真的很低

<!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; 但是效果是这样的