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

为什么第一段有span标签,第一段是绿色的,而第二段也有span标签,可是只有简单那两个字变绿了?

o<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1{color:red;}
.first,#second span{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 回答

因为第一段为类选择器,全部被<p class="first">第一段文字</p>包含

第二段被id选择器标记 且只有简单二字才被id选择器标记

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

慕粉3686312 提问者

我觉得是ID选择器标记了整个第二段,第一段中的span标签也标记了胆小如鼠,但是第一段都是绿的,我刚看别人的解释是ID选择器与span之间是空格,那就是说grenn这个属性只能作用于这个ID标签的子代也就是第二段中的span标签。试着把空格换成,,第二段变绿了。
2016-07-21 回复 有任何疑惑可以回复我~
#2

慕粉3686312 提问者

非常感谢!
2016-07-21 回复 有任何疑惑可以回复我~

首先明白两点:

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

    1.此句话首先是一个分组选择符,我们的目的是为多个标签元素设置同一个样式。

        分别为这两个标签元素设置同一个样式:.first元素  和#second中的span元素。

2. 该例的分组选择器由类选择器和后代选择器组成。

            .first{ color : green ;}---------普通的类选择器

            #second  span { color : green }------后代选择器,为span的所有后代元素指定样式。

            ps:  所有选择器(子选择器、后代选择器等)都是在类选择器和ID选择器的基础上衍生而来的。

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

ID就是指定的某个标签里的元素,而class是全部

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

因为第二段是ID指定的<span>所以只有“简单”两个字

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

#second span{color:green;}   这里的color更接近与span    所以那个更接近就显示哪个,遵循就近原则。我是这么理解的,不知道对不对。。。。

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

慕粉3686312 提问者

那第一段中不是更接近啊,其实就是#second span{color:green;} 中间有一个空格,前面不是讲过空格就只能作用于子代标签,所以,简单变绿了。应该就是这样理解了
2016-07-21 回复 有任何疑惑可以回复我~
#2

qq_甜心__03119590 回复 慕粉3686312 提问者

有道理!棒棒的!但我想的是如果第一段这样写 .first span{color:green;} 那第一段里也只有span标签里的是绿色了。也就是就近原则了,,
2016-07-21 回复 有任何疑惑可以回复我~

因为定义的内容不同, 第一段定义的first 是表示全段的,你看它在p标签里面,而second span只包含了简单二字

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

因为在第一段代码里,first标签生效,所以全绿。

而在第二段代码里,只有span标签生效,而second未生效。

要想第二段全绿,.first,#second span{color:green;},这行代码seond后要加个 ,   逗号  懂了吗

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

慕粉3686312 提问者

因为他们之间加了一个空格,所以只能作用于简单儿子
2016-07-21 回复 有任何疑惑可以回复我~

因为第一段为类选择器.first改变的颜色,而第二段是只有 id=second 下面的span 标签才改变的颜色。

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

自己好好看看8-5的内容,上面详细写了类和ID选择器的区别,第一段用的是类选择器,不规定次数,所以整一段都可以变绿色,第二段是ID选择器,只能使用一次。加在“简单”上所以只有简单变绿,你把<span>加在整段上就能全部变成绿色啦。

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

慕粉3686312 提问者

那我回去在温习一下
2016-07-21 回复 有任何疑惑可以回复我~

#second span 选择器的意思是说id为second 的所有span子元素,当然只有简单两个字变为绿色了。

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

举报

0/150
提交
取消

为什么第一段有span标签,第一段是绿色的,而第二段也有span标签,可是只有简单那两个字变绿了?

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