常用CSS选择器速查表

查看完整选择器列表，详见Selectors Level 3
PS: *选择器要慎用，因为它是性能最低的一个CSS选择器。

模式	解释	初次定义的CSS版本
*	任意元素	2
E	类型为E的元素	1
E[foo]	类型为E，且具有属性foo的元素	2
E[foo=”bar”]	类型为E，且属性foo值为bar的元素	2
E[foo~=”bar”]	类型为E，且属性foo的值以空格分隔为值列表，列表中具有bar值的元素E	2
E[foo^=”bar”]	类型为E，且属性foo值以bar开头的元素	3
E[foo$=”bar”]	类型为E，且属性foo值以bar结尾的元素	3
E[foo*=”bar”]	类型为E，且属性foo值包含子字符串bar的元素	3
E[foo|=”en”]	类型为E，且属性foo值以连字符“-”分隔成列表后，列表以en开头的元素 (|是 （竖）html 转义， 部分 md 转换有问题)[^1]	2
E:root	类型为E，且是文档的根元素	3
E:nth-child(n)	类型为E，且它是父元素的第n个子元素	3
E:nth-last-child(n)	类型为E，且它是父元素的倒数第n个元素	3
E:nth-of-type(n)	类型为E，且它是所有E兄弟元素的第n个	3
E:nth-last-of-type(n)	类型为E，且它是所有E兄弟元素的倒数第n个	3
E:first-child	类型为E，且它是父元素的第1个子元素	2
E:last-child	类型为E，且它是父元素的倒数第1个子元素	3
E:first-of-type	类型为E，且它是所有E兄弟元素中的第1个	3
E:last-of-type	类型为E，且它是所有E兄弟元素中的倒数第1个	3
E:only-child	类型为E，且它是父元素的唯一子元素	3
E:only-of-type	类型为E，且它是兄弟元素中的唯一一个类型为E的元素	3
E:empty	类型为E，且它没有子元素（包括文本元素）	3
E:link	作为超链接的元素E	1
E:visited	被执行了用户动作visited的元素E	1
E:active	被执行了用户动作active的元素E	1 and 2
E:hover	被执行了用户动作hover的元素E	1 and 2
E:focus	被执行了用户动作focus的元素E	1 and 2
E:target	相关URI目标的元素E	3
E:lang(fr)	使用语言fr的元素E	2
E:enabled	被enable的交互元素E	3
E:disabled	被disabled的交互元素E	3
E:checked	被checked过的交互元素E	3
E::first-line	元素E的首行字符	1
E:first-letter	元素E的首个字符	1
E::before	元素E的before伪元素	2
E::after	元素E的after伪元素	2
E.warning	类为warning的E元素	1
E#myid	id为myid的E元素	1
E:not(s)	不满足选择器条件s的E元素	2
E F	元素E的所有后代F元素	1
E > F	元素E的所有子F元素	2
E + F	元素E的紧邻F兄弟元素	2
E ~ F	元素E的兄弟F元素	3

markdwon 的表格中需要竖线“|”这样的特殊符号，咋办？

那就只能用html字符实体了： 
| 
| 
| 
| 
| 
这五个，任选一个吧~

---

[^1]: markdwon 的表格中需要竖线“|”这样的特殊符号，详见：

• markdwon 的表格中需要竖线“|”这样的特殊符号，咋办？@v2ex
• http://www.asciitable.com/

转自 ： https://yanyinhong.github.io/2017/04/30/CSS-selector-cheat-sheet/