HTML中六类主要选择器详述

选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。常用类型有六类：标签选择器，类选择器,id选择器，后代选择器，分组选择器和通配符选择器。

标签选择器

标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：
标签选择器名 {
      declaration1;
      declaration2;
      …
}
代码示例：

<style>
	h1{
		color: yellow;
		font: "微软雅黑";
	}
</style>

<h1> 舒舒服服 </h1>

类选择器

类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：
类选择器名 {
      declaration1;
      declaration2;
      …
}
代码示例：

<style>
	.u{
		font-family: "华文楷体";
		font-size: 180px;
		color: greenyellow;
	}
</style>

<span class="u">zzu-957</span>

注意：
1、class标签属性的属性值不能以数字开头；
2、class标签属性的属性值可以有多个，每个值之间用空格间隔；

id选择器

id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：
#id选择器名 {
      declaration1;
      declaration2;
      …
}
代码示例：

<style>
	#zzu{
		font-family: "微软雅黑";
		font-size: 72px;
		color: chartreuse;
	}
</style>

<span id="zzu">zzu-957</span>

注意：
1、id标签属性的属性值不能以数字开头；
2、id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；
后代选择器
后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器（选择器之间用空格间隔） {
      declaration1;
      declaration2;
      …
}
代码示例：

<style>
	html body #zzu{
				background-color: red ;
				}
</style>

分组选择器

分组选择器：如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：
选择器1,选择器2,选择器3…{
      declaration1;
      declaration2;
       …
}
代码示例：

<style>
	#z,.u{
		color: red ;
		}
</style>

通配符选择器

通配符选择器：通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：
*{
      declaration1;
      declaration2;
       …
}
代码示例：

<style>
	*{
		margin:0px;
		padding:0px;
	}
</style>