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

来源:8-10 给选择器分个组 - 分组选择器

慕粉3686312

2016-07-21 20:53

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://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

写回答 关注

10回答

  • 慕粉3622610
    2016-07-21 21:03:26
    已采纳

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

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

    慕粉3686...

    非常感谢!

    2016-07-21 22:35:41

    共 2 条回复 >

  • 慕少5983526
    2016-07-30 13:27:30

    首先明白两点:

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

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

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

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

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

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

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

  • everymoment3674130
    2016-07-21 21:23:21

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

  • everymoment3674130
    2016-07-21 21:20:19

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

  • qq_甜心__03119590
    2016-07-21 21:13:25

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

    qq_甜心_... 回复慕粉3686...

    有道理!棒棒的!但我想的是如果第一段这样写 .first span{color:green;} 那第一段里也只有span标签里的是绿色了。也就是就近原则了,,

    2016-07-21 21:33:36

    共 2 条回复 >

  • EDC2000
    2016-07-21 21:11:28

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

  • 梦付流年
    2016-07-21 21:08:54

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

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

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

    慕粉3686...

    因为他们之间加了一个空格,所以只能作用于简单儿子

    2016-07-21 21:13:21

    共 1 条回复 >

  • 姗姗来迟3691208
    2016-07-21 21:08:43

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

  • 无敌小马哥
    2016-07-21 21:08:25

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

    慕粉3686...

    那我回去在温习一下

    2016-07-21 21:11:47

    共 1 条回复 >

  • 慕粉3693470
    2016-07-21 21:05:06

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

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

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

1225806 学习 · 18234 问题

查看课程

相似问题