1. 基本选择器： #id .class 标签选择器 (*)通配符选择器
2. 关系选择器：
子代选择器： s1 > s2 匹配s1中的下一级s2
后代选择器： s1 s2 匹配s1中的所有的后代s2
相邻选择器： s1 + s2 匹配s1后面紧挨着的同级元素s2
兄弟选择器： s1~s2 匹配s1后面所有同级(兄弟)元素s2
分组选择器： s1,s2 匹配s1和s2一起设置样式
3. 属性选择器：
[attr] 匹配具有所给定属性名称的标签
[attr='val'] 匹配具有某个属性且属性值为给定值的标签
[attr ~='val'] 匹配具有某个属性且属性值包含所给定单词的标签
[attr *="val"] 匹配具有某个属性且属性值包含给定的字符的标签
[attr ^="val"] 匹配具有某个属性且属性值以给定的字符开头的标签
[attr$="val"] 匹配具有某个属性且属性值以给定的字符结尾的标签
4. 伪类选择器：
a: link(未访问过的) a:visited(点击之后的) a:hover(鼠标移动) a:active(激活) :focus (获得焦点，用于Input)
E：first-child ----------匹配作为父元素的第一个子元素
E： last-child -----------匹配作为父元素的最后一个子元素
E：only-child ------- ----------匹配作为父元素的唯一一个子元素
E：nth-child(n) ------------匹配作为父元素的第n个子元素E。括号里面n是具体的数字 nth-child(2n+1)奇数 nth-child(zn+2) 偶数
举例： li:first-child //作为第一个子元素的li标签 li:last-child //作为最后一个子元素的td标签
li:only-child{} //作为父元素中只有这一个子元素的p标签 li:nth-child(2) //作为第2个子元素的li标签
E：empty -----------匹配元素内部为空(没有内容)的元素
E: checked [checkbox] --------匹配被选中的元素
E：enabled[text] -----------匹配"可用的/有效的元素" （用于表单元素）
E: disabled[text] ---------- 匹配"不可用的/有效的元素" (用于表单元素)
5. 伪元素选择器
E:before ------- 表示在元素E的内部的最前面创建一个元素(伪元素) -- 其中必须写上一个属性:content:“内容”
E::after -------- 表示在元素E的内部的最后面创建一个元素(伪元素) --- 其中必须写一个属性 : content:“内容”
E::first-letter -----表示元素E中的"第一个字符"可以单独作为一个元素(伪元素)
E::first-line -----表示元素E中的"第一行"可以单独作为一个元素(伪元素)
E::selection ----- 表示将元素E中"选中的文字"单独作为一个元素(伪元素)
6. 几大浏览器内核标识
谷歌： Chrome: -webkit- 火狐：-moz- 微软: -ms- 苹果: -webkit- 欧朋Opeara: -o-
7: 常见选择器的组合
E.className E#id E[属性选择器]
8. 优先级：伪元素选择器 > !important > 行内样式 > id选择器 > 类选择器(或伪类选择器) > 元素选择器 > * > 继承样式 > 浏览器默认
important:就是在一个属性的设定中，在属性值后面加"!important'标识，然后在加分号(;)
例如: .c1{color:red!important} 与.c1{color:yellow} 此时，(!important优先了)
来源：https://www.cnblogs.com/itfz/p/10770030.html