慕粉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>
因为第一段为类选择器,全部被<p class="first">第一段文字</p>包含
第二段被id选择器标记 且只有简单二字才被id选择器标记
首先明白两点:
.first,#second span{color:green;}
1.此句话首先是一个分组选择符,我们的目的是为多个标签元素设置同一个样式。
分别为这两个标签元素设置同一个样式:.first元素 和#second中的span元素。
2. 该例的分组选择器由类选择器和后代选择器组成。
.first{ color : green ;}---------普通的类选择器
#second span { color : green }------后代选择器,为span的所有后代元素指定样式。
ps: 所有选择器(子选择器、后代选择器等)都是在类选择器和ID选择器的基础上衍生而来的。
ID就是指定的某个标签里的元素,而class是全部
因为第二段是ID指定的<span>所以只有“简单”两个字
#second span{color:green;} 这里的color更接近与span 所以那个更接近就显示哪个,遵循就近原则。我是这么理解的,不知道对不对。。。。
因为定义的内容不同, 第一段定义的first 是表示全段的,你看它在p标签里面,而second span只包含了简单二字
因为在第一段代码里,first标签生效,所以全绿。
而在第二段代码里,只有span标签生效,而second未生效。
要想第二段全绿,.first,#second span{color:green;},这行代码seond后要加个 , 逗号 懂了吗
因为第一段为类选择器.first改变的颜色,而第二段是只有 id=second 下面的span 标签才改变的颜色。
自己好好看看8-5的内容,上面详细写了类和ID选择器的区别,第一段用的是类选择器,不规定次数,所以整一段都可以变绿色,第二段是ID选择器,只能使用一次。加在“简单”上所以只有简单变绿,你把<span>加在整段上就能全部变成绿色啦。
#second span 选择器的意思是说id为second 的所有span子元素,当然只有简单两个字变为绿色了。
初识HTML(5)+CSS(3)-升级版
1225294 学习 · 18230 问题
相似问题