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

选择器样式覆盖

<style type="text/css">

h1,span{color:red;}

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

</style>

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

kevine099

2016-04-07

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

关注问题我要回答

1113

操作

收起

4 回答

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

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

span{color:blue;}

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

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

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

#1

用户nlk9a8o0e0

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

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

#2

kevine099 提问者回复用户nlk9a8o0e0

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

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

#3

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

在这里我并没有对<a>标签进行任何处理，为什么它还是变蓝了，因为浏览器会默认给<a>一个样式

a:link{color:blue;}

所以链接的颜色还是蓝色并没有变红

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

用户nlk9a8o0e0
2016-04-07

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

你这样.first里面的子选择器span当然是红色的，#second>span这个是选择id为second元素的span子选择器，id为second的只有第二段，当然就第二段里的span是蓝色的

.first,span{color:blue;}

这样所有的就是蓝色的了

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

#1

Evey_Wong 回复 kevine099 提问者

我认为应该是样式优先级吧，感觉上来讲是这样的。因为行内样式>内部样式>外部样式.总之一句话就是就近原则

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

著名神经刀
2016-04-07

.first,span{ color:green;}

#second span{ color:green;}

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

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1223090 人
解答问题 18212 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

6 回答选择器的样式

4 回答选择器与内嵌式样式

3 回答ID选择器能添加后代选择器样式吗

2 回答类选择器不是10么，怎么覆盖不了权值2的呢？

2 回答什么p span的紫色覆盖了类选择器的绿色，类选择器的权值不是更高吗

搜索更多本课相关问答

选择器样式覆盖

我要回答关注问题

意见反馈帮助中心 APP下载