元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素。
语法：标签名{}
p{
color: red;
}
id选择器
作用：通过元素的id属性值选中唯一的一个元素。
语法：#id属性值{}
#p1{
font-size: 20px;
}
类选择器
作用：通过元素的class属性值选中一组元素。
语法：.class属性{}
.p2{
color: red;
}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素。
语法:选择器1选择器2选择器N{}
不建议id选择器使用复合选择器
span.p3{
color: yellow;
}
选择器分组（并集选择器）
作用:通过选择器分组可以同时选中多个选择器对应的元素。
语法：选择器1，选择器2，选择器N{}使用逗号隔开各个选择器
#p1,.p2,h1{
color: yellow;
}
通配选择器
作用：可以用来选中页面中的所有元素。
语法：*{}
*{
color: red;
}
后代元素选择器
作用：选中指定元素的指定后代元素。
语法：祖先元素 后代元素{}
使用空格隔开
#d1 p span{
color: green;
}
<!--选中id为d1的div中的p元素中的span元素-->
子元素选择器
作用：选中指定父元素的指定子元素。
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
div > span{
color: red;
}
元素之间的关系
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素：直接或间接被主线元素包含的元素，子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素叫兄弟元素
