作用：为html中多个标签元素设置同一个样式
语法：h1,span{font-size:20px}
相当于下面两行代码
h1{font-size:20px}
span{font-size:20px}
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type' content-type="text/html" charest="utf-8">
<title>分组选择器</title>
<style type="text/css">
.frist,#second span{color:red;}
</style>
</head>
<body>
<h1>CSS选择器</h1>
<pclass="first">使用css对HTML页面中的元素实现<span>一对一，一对多或者多对一</span>的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。</p>
<pid="second">每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于<span>网页</span>中的哪些元素</p>
</body>
</html>
上述代码运行的效果：第一段文字和第二段中的“网页”字体颜色将会变成红色。
注：1.“.frist”对应的是class=“first”，“#second”对应的是id=“second”；
2.为什么first前面要加英文圆点，而h1不用？答：因为first是选择器定义问题，即选择器起名；
3.至于first和second后面与span之间是一个空格，这就是后代选择器的内容了；
4.如果是这样写：h1,span{color:blue;}
.first>span{color:red;},#second span{color:green;}
显示的性格效果为标题“CSS选择器”和第二段中的“网页”字体颜色变为蓝色，而第一段中<span></span>中的内容字体颜色变为红色。原因：标签选择器的权重要比后代
选择器的权重值大，而第一段中<span></span>中的内容字体颜色之所以变为红色而不是蓝色，是因为就近原则。
5.如果要想让第二段整体颜色变为红色，而“网页”颜色为绿色:
h1,span{color:blue;}
.first>span{color:red;}
#second{color:red;}
#second span{color:green;}
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
