一、CSS3以前的选择器

选择器 概述 例
标签选择器 选择页面中所有指定类型的标签 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{}

二、CSS3新增的选择器

选择器 概述 例
加强属性选择器 在原有属性选择器的基础上增加了类似于字符串匹配的功能 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{}

原文作者：絷缘
作者邮箱：zhiyuanworkemail@163.com
原文地址：https://zhiyuandnc.github.io/ORutvrQMw/
版权声明：本文为博主原创文章，转载请注明原文链接作者信息