作用:为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;}