标签选择器

选择页面中所有指定类型的标签

a{}

ID选择器

选择页面中拥有指定ID值的标签

#id{}

Class选择器

选择页面中拥有指定Class值的标签

.class{}

通配符选择器

选择页面中所有标签

*{}

后代选择器

选择指定标签下所有后代元素标签

ul li{}

相邻兄弟选择器

选择指定标签同级的向下一个指定元素标签

li+li{}

子选择器

选择指定标签下指定类型的直接子元素标签

ul > li{}

属性选择器

选择拥有指定属性和属性值的指定类型的标签

input[type='password']{}

分组选择器

同时选择多个满足条件的标签

html,body,p,ul{}

伪类选择器

一般指a标签等存在交互行为的元素在多种状态下的操作

a:hover{}
a:active{}
a:visited{}
input:focus{}

伪元素选择器

DOM中不存在的元素，一般用来协助标签完成特定功能

div::before{}
div::after{}
p::first-line{}
p::first-letter{}

过滤选择器

选择指定类型指定属性条件的标签

h1.title{}

加强属性选择器

在原有属性选择器的基础上增加了类似于字符串匹配的功能

input[name^='user']{}
input[name$='word']{}
input[name*='name']{}

结构伪类选择器

在之前特定几个伪类的基础上，添加了对子元素选择的支持

:root{}
ul:nth-child(n){}
ul:nth-last-child(n){}
ul:nth-of-type(n){}
ul:nth-last-of-type(n){}
ul:last-child{}
ul:first-child{}
ul:first-of-type{}
ul:last-of-type{}
ul:only-child{}
ul:only-of-type{}
li:empty{}

否定伪类选择器

选择除满足指定选择器的元素外的所有标签元素

:not(p){}

通用兄弟选择器

选择指定元素之后的指定条件的多个同级标签元素

ul~li{}

目标伪类选择器

选择指定元素指向的锚点处的指定标签元素

#id:target{}

状态伪类选择器

选择拥有指定状态的标签元素

input:enabled{}
input:disabled{}
input:checked{}
::selection{}