1、类选择器 .class名{ }
2、id选择器 #id名{ }
3、元素选择器 元素名{ } eg：p{} h1{} div{}
4、属性选择器 选择器名[ 属性名 ]{ } eg：a[href] { color: red } 带有 href 属性的a标签颜色设置为红色
5、伪类选择器 eg：div:hover{ } 鼠标悬停在div上时
6、通配符选择器 *{ } eg： *{font-size: 16px} 文档中所有元素的字体大小为16px
7、群组选择器 选择器1 , 选择器2 , 选择器N{ } eg：.box1,#box2,p{} class为box1 id为box2 p标签
8、后代选择器（包含选择器） 选择器1 选择器2 选择器N{ } eg：h1 em{ } h1 元素中所有后代的 em元素
9、子元素选择器 父元素>子元素 eg：h1 > strong h1 元素中为直接后代的 strong 元素（直接父类为h1，不能是其他元素里包裹的 strong）
10、相邻兄弟选择器 选择器1 + 选择器2 eg： h1 + p{ } 选择紧跟在h1下面的p标签 注：两个选择器必须有共同的父元素，选择器2紧接着选择器1
10000 ! important // 无条件优先
1000 内联样式 style=" "
100 id选择器
10 类选择器、伪类、属性
1 标签、伪元素
0 通配符、子、相邻
无 继承
浏览器默认
先从高等级开始比较，
高等级相同时，再比较低等级
都相同时，后者优先，即样式覆盖
原文：https://www.cnblogs.com/meinvfqf/p/14606601.html