简单选择器
通过元素类型，class，id或者*匹配的一个或多个元素
元素类型->标签选择器
class->类选择器
id->id选择器
*匹配->通用符选择器
标签选择器：设置页面上所有的标签元素的样式
p{
color:red
}
设置p元素的样式
类选择器：设置页面上所有类的样式
.coll{
color:red
}
设置页面上所有类名为coll的样式
（1）匹配类名，以.开头
（2）类名必须是，字母，数字，-，_组成
（3）类型必须以字母开头
（4）区分大小写
id选择器：设置所有页面上id相同的样式
#coll{
color:red
}
（1）匹配id名，以#开头
（2）类名必须是，字母，数字，-，_组成
（3）id必须以字母开头
（4）区分大小写
属性选择器：匹配页面上所有具有这个属性的元素
[disable]{
color:red
}
<input type="text" disable>
也可以是同时具有属性名和属性值
[type='button']{
color:red;
}
<input type="button" value="按钮">
含有波浪号~和等号=的属性选择器，代表一个有att属性且值是一个由空白字符分隔的单词列表，其中之一恰好是“val”的元素
[class~='tittle']{
color:red;
}
[class~="content"]{
font-size:12px;
}
<p class="color tittle">
<p class="name content">
含有|=，选择att属性的值以val开头，包含val的元素
[class|='cn']{
color:red;
}
<p class="cn-name">（注意）必须是以-分开的
含有$=，选择att属性的值以val结尾，包含val的元素
[class|='name']{
color:red;
}
<p class="cn-name">（注意）只要是name结尾就行，不需要是哪种特殊符号分开
伪类
input相关
：checked，选择所有选中的表单元素
：empty，匹配所有没有子元素的元素（包括text节点）的元素E
：optional，匹配所有表单元素可以为空的元素（加了required，就变成必填项）
：read-only/:red-write，前者匹配设置了只读属性的元素，后者匹配了所有没有设置只读元素的元素
：required/:valid，前者匹配了所有设置了required属性的元素，后者匹配所有正确的valid值时的样式，例如：
<input type="email" value="[email protected]">，这个：valid就会匹配成功，设置样式，
<input type="email" value="xx@163@com">，这个会匹配失败，设置不正确
：target，选择当前的活动元素，（也就是点击了url包含的锚点名字，当页面跳转到锚点后，锚点所在的块内容就会被赋予样式）
：root，匹配文档的根元素
：enable/:disable，匹配页面上所有可用或者不可用的元素，例如
[type='text']:enable{
color:red;
}
<input type="text">,匹配到了可用的样式
<input type="text" disable='disable'>，匹配到了不可用的样式
：first-child/:last-child,匹配一个作为某元素的第一个子元素/最后一个子元素，例如
p:first-child{
color:red;
}
p:last-child{
color:blue;
}
<div>
<p>1</p>
<p>2</p>
</div>
nth-child(2)：作为某元素的子元素正数第二个
nth-last-child(3)：作为某元素的子元素倒数第三个
同时允许乘法因子作为运算，例如：nth-child(2n)，所有2的倍数的赋予样式也就是偶数，nth-child(2n+1)，所有2的倍数+1也就是奇数的赋予样式
：link，未被访问过的链接样式
：visited，被访问过的链接样式
：hover，当鼠标移入时触发样式
：focus，当input聚焦时触发的样式
伪元素选择器
::，开头
p::first-letter，选择p元素上第一个单词的第一个字母，中文的话就是第一个汉字
p::first-line，p元素的第一行
::before，在元素前插入内容，例如，content="1233"，在元素前插入文字1233
::after，在元素后插入内
::selection，当用户选中内容时，通常我们复制内容前都要选中