元素选择器
作用：通过元素选择器可以选择页面中的所有的元素
语法：标签名{ }
id选择器
通过元素的ID属性值选中唯一的一个元素
#p1{
font-size: 20px;
}
类选择器
通过元素的class属性值选中一组元素
.p2{
color: red;
}
选择器分组
通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器n{ }
#p1, .p2 ,h1{
background-color: yellow;
}
通配选择器
可以用来选中页面中的所有的元素
*{
color: red;
}
复合选择器（交集选择器）
作用：
可以选中同时满足多个选择器的元素
语法：
选择器1,选择器2选择器n{ }
span.p3{
background-color: yellow;
}
属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值的元素
[属性名^=“属性值”]选取属性值以指定内容开头的元素
[属性名$=“属性值”]选取属性值以指定内容结尾的元素
[属性名*=“属性值”]选取属性值以包含指定内容的元素
伪类选择器
伪类专门用来表示元素的一种的特殊的状态
eg：访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
:link
表示普通的链接（没访问过的链接）
a:link{
color: yellowgreen;
}
:visited
伪类只能设置字体的颜色
a:visited{
color: red;
}
:hover
伪类表示鼠标移入的状态
a:hover{
color: skyblue;
}
:active
表示的是超链接被点击的状态
a:active{
color: black;
}
子元素选择器
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
:nth-of-type
type是在当前类型的子元素中排列
兄弟选择器
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个
span + p{
background-color: yellow;
}
选中后边的所有的兄弟元素
语法：前一个~后边所有
span ~ p{
background-color: yellow;
}
否定伪类：
作用：可以从选中的元素中剔除出某些元素
p:not(.hello){
background-color: yellow;
}