为了账号安全,请及时绑定邮箱和手机立即绑定

关于颜色的问题

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>分组选择符</title>

<style type="text/css">

h1,span{color:red;}

.first{color:green;}

</style>

</head>

<body>

    <h1>勇气</h1>

    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

    <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg" >

</body>

</html>

为什么“胆小如鼠”四个字仍然是红色的?按理说,类选择器的权值为10,上面的span的权值为1呀,按理说应该是按照类选择器的写法走啊,应该是绿色呀,为什么这四个字是红色呢?谁能帮我解释下呢?

正在回答

4 回答

我认为红色跟绿色他们的作用范围不一样,绿色针对P全文,红色针对span更具体,之前有讲到就近原则,谁离这几个字最近就选谁,权值只有在作用范围一样的情况下才会有用

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

qq_一生之久_0 提问者

权值的影响最大啊,就近原则的前提是权值相等啊
2016-04-06 回复 有任何疑惑可以回复我~
#2

继续努力的小楠 回复 qq_一生之久_0 提问者

不是,你说的是层叠,如果权值相等,后设置的谁就显示谁,我说的是对于“胆小如鼠”这四个字span比p更近,因此会显示span的设置吧
2016-04-06 回复 有任何疑惑可以回复我~
#3

qq_一生之久_0 提问者 回复 继续努力的小楠

就近原则的前提是权值相等,权值谁大就启用谁,权值相等就按照就近原则,
2016-04-06 回复 有任何疑惑可以回复我~
#4

继续努力的小楠 回复 qq_一生之久_0 提问者

呃呃呃。。。好吧,我错了,那可能原因就是一楼说的那样吧
2016-04-06 回复 有任何疑惑可以回复我~
#5

qq_一生之久_0 提问者

非常感谢!
2016-04-06 回复 有任何疑惑可以回复我~
查看2条回复

span里 first是继承,并不是类选择器

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

qq_一生之久_0 提问者

我是这么理解的,我认为到了<span>标签的时候,应该权值更高,到了<span>的时候,权值为10加上继承的权值,是不是我的理解有误呢?
2016-04-06 回复 有任何疑惑可以回复我~
#2

继续努力的小楠 回复 qq_一生之久_0 提问者

我觉得你这个理解好像更像就近原则,跟权值应该没关系吧,权值是针对一个元素,他的代码是针对两个元素
2016-04-06 回复 有任何疑惑可以回复我~
#3

qq_一生之久_0 提问者

它是分组选择符,针对一个元素的
2016-04-06 回复 有任何疑惑可以回复我~
#4

继续努力的小楠 回复 qq_一生之久_0 提问者

h1跟span当然都是只针对一个,span的设置跟.first是针对的两个,不是一个
2016-04-06 回复 有任何疑惑可以回复我~
查看1条回复

是不是因为不是对同一个元素进行的设置?.first是对P标签,h1、span不是针对P标签的,所以<span>胆小如鼠</span>还是使用span的设置

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

<span>标签并没有引用first类。它应用的是自身的样式。

虽然first类权值高,但是它只作用在<p>标签上,到<span>标签的时候是继承了,继承的权值很低的。

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

qq_一生之久_0 提问者

我是这么理解的,我认为到了<span>标签的时候,应该权值更高,到了<span>的时候,权值为10加上继承的权值,是不是我的理解有误呢?
2016-04-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225788    人
  • 解答问题       18234    个

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

进入课程

关于颜色的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信