一、初级选择器
1.1 基础选择器
通配符（*）选择器
语法：*{属性：属性值；}
说明：*表示页面中所有的元素（标签），我们常用来重置样式。
实例：
*{
margin: 0;
padding: 0;
}
标签（元素）选择器
语法：标签名{属性：属性值；}
说明：标签选择器就是使用结构中元素名称直接作为选择符。
实例：
div{
width: 100px;
height: 100px;
}
类（class）选择器
语法：.class名{属性：属性值；}
说明：当我们使用类选择器时，需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。
实例：
<h1 class="title">标题1</h1>
<h2 class="title">标题2</h2>
.title {
color: red;
}
注意：类名要尽量使用英文表示，不能使用数字或中文命名，并且尽量起一些有意义的名字，让别人能一眼看出来这个类名的作用。
类名可以有多个，多个类名之间要使用空格隔开。我们可以把一些标签元素相同的样式放到一个类调用，从而节省CSS代码，例如版心可以写统一样式。
id选择器
语法：#id名{属性：属性值；}
说明：id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器，需要先为元素上定义id属性。
实例：
<div id="box"></div>
定义好id之后就可使用#box给对应的div上添加：
#box {
width: 100px;
height: 100px;
}
注意：起id名时不能用关键字（所有标签和属性都是关键字），并且一个id名称只能对应文档中一个具体的元素对象，因为id的特殊性，只能代表页面中某一个唯一的元素对象，就好比我们的身份证号，一个人只能对应一个唯一的id。
1.2 结构选择器
后代（包含）选择器
语法：选择器1（父） 选择器2（子）{属性：属性值；}
说明：选择器1和选择器2中间用空格隔开，表示选择选择器1中包含选择器2的所有后代元素。
实例：
<div class="box">
<h2>标题1</h2>
<p>段落1</p>
<p>段落2</p>
</div>
.box p {
color: red;
}
子代选择器
语法：选择器1>选择器2{属性：属性值；}
说明：用来选择紧挨着选择器1（父元素）的第一层符合选择器2的子元素。
实例：
<div class="box">
<h2>标题1</h2>
<div>
<h2>标题2</h2>
</div>
</div>
.box > h2 {
color: red;
}
全部兄弟选择器
语法：选择器1~选择器2{属性：属性值；}
说明：选择当前元素所有符合条件的兄弟元素。
实例：
<div class="box">
<h2>标题1</h2>
<p>段落</p>
<h2>标题2</h2>
<h2>标题3</h2>
</div>
p ~ h2 {
color: red;
}
注意：只能选中当前元素后面的元素。
相邻兄弟选择器
语法：选择器1+选择器2{属性：属性值；}
说明：选中当前元素紧挨着的后面的兄弟元素。
实例：上面的案例修改成：
p + h2 {
color: red;
}
注意：只能选中当前元素后面的元素，如果没有紧挨着当前元素就不会产生效果。
并集（群组）选择器
语法：选择器1，选择器2{属性：属性值；}
说明：用于对多个标签定义同样的样式，选择器之间用逗号分隔。
实例：这里我们依然用上述的结构：
p,
h2 {
color: red;
}
交集选择器
语法：选择器1选择器2{属性：属性值；}
说明：用于选择同时符合选择器1和选择器2条件的元素。
实例：
<h2 class="title">标题1</h2>
<h2>标题2</h2>
h2.title {
color: red;
}
