类选择器，属性选择器，伪类选择器权重都为10
属性选择器
input[value]{}//包含value的都被选择
input[type=password]//只选择type=password的input
div[class^=icon]//只选择类名以icon开头的div标签
div[class$=data]//只选择类名以data结尾的div标签
div[class*=val]//只要类名中有val的div标签都会被选择
div{} 权重1
div[class^=icon]{} 权重11（div=1,[class^=icon]=10）
div.icon{} 权重11（div=1,.icon=10）
结构伪类选择器：主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
ul li:first-child{}
ul li:last-child{}
ul li:nth-child(n){}
其中，E :nth-child(n)中，n可以是数字、关键字甚至公式，如果是数字，则选择第n个子元素，如果是公式，则必须使用n作为自变量，n可以看作一个从0开始不断自增的变量。常见关键字是even和odd，等价于2n和2n+1。公式中，n+5是从第五个开始，-n+5是前五个（包含第五个）。
两种选择符的区别：前者先将所有子元素排序，找到第n个再看符不符合需求标签类型，如果不是就执行；后者先选择需求的标签，再将他们排序，最后找到目标元素。
为元素选择器：帮助我们利用CSS创建新标签元素，而不需要html标签，从而简化html结构
element::before{}
由于新创建的元素无法再dom树中找到所以称为为元素。
before和after必有content属性且为行内元素。
伪元素相关清除浮动方法：
一：
.clearfix::after{
content:'';
display:block;
height:0;
visibility:hidden;
clear:both;
}
二：
.clearfix::before,.clearfix::after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
