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

帮我看下大改特改的代码,主要是关于class和id

我设置了四个段落,1,2,3,4,又用了class和id,运行出来的段落颜色只有第一段绿色,其他三个段落都是蓝色,归纳总结下,谢谢啦

还有一个问题就是 4个span我都给了颜色,第四个没有变,这里面有什么关系吗,是我还没学到,还是哪章节理解错了呢

正在回答

3 回答

http://img1.sycdn.imooc.com//5867cfd40001f2e008960546.jpg

你的代码基本上都是对的,但是有一点点瑕疵。第一段,因为你用了类first,字体变成绿色,但是span没有继承类first,而是使用它自己的属性,所以span是红色;第二段,因为你同时存在类second和ID 的second,所以,ID的second覆盖了second,使其失效,相当于这段代码是没写一样,不然的话你的第二段文字应该是粉色,但是被覆盖之后,而ID的second又没有定义P,所以还是段落依照本来的P执行蓝色,而span这是根据ID的second执行绿色;第三段的span是有ID的three,所以是黄色,p则是依照p定义执行蓝色;第四段因为你的ID写成了CLASS,所以没有体现ID的效果,改过来之后,span变成黑色,而p则是依旧执行蓝色。

<!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,#second span{color:green;}
#third span{color:yellow;}
p{color:blue;}
.second{color:pink;}
#fourth>span{color:black;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,</p>
    <p id="third">还说着:"<span>我来,我来。</span>"我环顾了四周,</p>
    <p id="fourth">就我<span>没有</span>举手。</p>
    <img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg" >
</body>
</html>


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

让老夫瞅瞅 提问者

恩,虽然谈不上会了,但是你分析的很细,至少我不会乱改了,哈哈哈。采纳了!! #fourth>span{color:black;} 这句好像去掉>也可以,不知道有没有说错?
2017-01-02 回复 有任何疑惑可以回复我~
#2

丶低调丶 回复 让老夫瞅瞅 提问者

去掉就成蓝色的勒,改才是好事,程序员就是在不断的错误中进步地,加油
2017-01-02 回复 有任何疑惑可以回复我~
#3

水禾火

大神,能给解释一下最开始错误的代码情况下为什么第四段的 没有是红色的么,谢谢
2017-01-06 回复 有任何疑惑可以回复我~
#4

丶低调丶 回复 水禾火

因为他之前最开始定义了一个span是红色,他定义的ID的span是黑色,但是由于他将ID写成了class,所以ID的效果没有体现出来,然后,span就出现了最开始定义的红色,将class改成ID,就可以体现出黑色
2017-01-06 回复 有任何疑惑可以回复我~
#5

水禾火 回复 丶低调丶

谢谢了
2017-01-06 回复 有任何疑惑可以回复我~
查看2条回复

<!DOCTYPE HTML>

<html>

<head>

<!--

作者:wan05@126.com

时间:2016-12-31

描述:没太明白您要表达的意思,我理解着你估计是要:把"勇气"变红色,段落内是绿色,四个span分别是不同颜色吗?

-->

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

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

<style type="text/css">

h1{color:red;}

p{color:green;}

.first span{color:blue;}

#third span{color:yellow;}

#second span{color:pink;}

#fourth span{color:black;}

</style>

</head>

<body>

    <h1>勇气</h1>

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

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

    <p id="third">还说着:"<span>我来,我来。</span>"我环顾了四周,</p>

    <p id="fourth">就我<span>没有</span>举手。</p>

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

</body>

</html>



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

<p class="fourth">就我<span>没有</span>举手。</p>把class改为id

#号用id      .号用class

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

举报

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

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

进入课程

帮我看下大改特改的代码,主要是关于class和id

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