css的选择器有4种类型：元素选择器，关系选择器，属性选择器，伪类选择器，伪对象选择器
一、 元素选择器
元素选择器：*, E, E#id, E.class
二、关系选择器
关系选择器：E F, E>F, E~F, E+F
- E F:这个表示E的所有的后代元素F，后代包括：子代，孙代，孙孙代。。。。
- E>F:表示选中E的所有子代元素F，只有子代元素，不包括孙代。。。
- E~F:表示选中E的所有兄弟元素F，只要和E是相同的父级元素的F都会被选中
- E+F:表示选中E的相邻的兄弟元素F，和E~F不同，这个只能选中相邻的兄弟元素
三、属性选择器
属性选择器：E[attr], E[attr = 'value'], E[attr*= 'value'], E[attr ^= 'value'], E[attr $= 'value'], E[attr ~= 'value'], E[attr |= 'value']
- E[attr]：选中包含attr属性的元素
- E[attr = 'value']: 选中包含attr属性，并且atrr = 'value'的元素
- E[attr*= 'value']: 选中包含attr属性，并且属性值中包含value的元素
- E[attr ^= 'value']： 选中包含attr属性，并且属性值是以value字符串开头的元素
- E[attr $= 'value']： 选中包含attr属性，并且属性值是以value字符串结束的元素
- E[attr ~= 'value']：选中包含attr属性，并且属性值是用空格分隔的字词列表，其中一个等于value的E元素
四、伪类选择器
伪类选择器：E:link, E:visited, E:hover, E:active, E:hocus, E:lang(fr),
E:first-child,E:last-child,E:only-child, E:nth-child(n), E:nth-last-child(n),
E:first-f-type, E:last-of-type, E:only-of-type, E:nth-of-type(n), E:nth-of-last-type(n)
E:empty, E:disabled, E:enabled, E:checked, E:target
E:not(s), E:root
- E:link, E:visited, E:hover, E:active, E:hocus：（1）如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现（2）超链接的4种状态，需要有特定的书写顺序才能生效。（3）注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
- E:lang(fr)：匹配使用特殊语言的E元素
- E:first-child：匹配父元素的第一个子元素E，注：（1）E必须是某个元素的子元素，也可以是body的子元素。（2）E必须是父元素的第一个子元素
- E:last-child： 匹配父元素的最后一个个子元素E，注：（1）E必须是某个元素的子元素，也可以是body的子元素。（2）E必须是父元素的最后一个子元素
- E:only-child: 匹配父元素有且仅有的一个子元素E，注：（1）E必须是某个元素的子元素，也可以是body的子元素
- E:nth-child(n), E:nth-last-child(n) 用法与前面类似
- E:first-f-type： 匹配同类型中的第一个同级的兄弟元素E, 注：（1）E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body （2）该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
- E:last-of-type, E:only-of-type, E:nth-of-type(n), E:nth-of-last-type(n)：与上面类似
- E:empty： 匹配没有任何子元素（包括文本节点text）的元素E
- E:checked： 匹配用户界面上处于选中状态的元素E，（用于input type为radio， checkox的 元素）
- E:target: 匹配相关URL指向的E元素， URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素
五、伪关系选择器
伪关系选择器： E::before, E::after, E::placeholder, E::first-letter, E::last-letter, E::first-line, E::last-line, E::selection
- E::selection： 设置对象被选择是的样式
参考链接：css参考手册