最全的CSS选择器及示例整理，你值得拥有

1、简单选择器

选择器	示例	含义
通配符	*	所有元素
ID选择器	#demo	匹配id=”demo”的元素(id唯一)
类选择器	.demo	匹配class属性值包含demo的元素
元素选择器	div	匹配所有div元素
包含/后代选择器	div p	匹配所有被div包含的p元素
子代选择器	div>p	匹配div元素的所有一级子元素p
相邻兄弟选择器	div+p	匹配紧跟在div元素之后的兄弟元素p
兄弟选择器	div~p	匹配div元素后面的所有兄弟元素p
组合选择器	div,p	匹配所有div元素和p元素

搭配 盘点选择器中的那些坑~ 食用更佳

注意：

!important就如同一个VIP标签，被贴上此标签CSS声明将获得高权重。要谨慎使用 !important。

2、动态伪类选择器

选择器	示例	含义
E:link	a:link	匹配未访问过的链接a
E:visited	a:visited	匹配访问过的链接a
E:hover	a:hover	设置元素在鼠标悬停时的样式
E:active	a:active	匹配被激活的元素
E:focus	a:focus	匹配获取焦点的指定元素
E:focus-within	a:focus-within	匹配当前获取焦点的元素或者其父辈元素（类似于JavaScript事件冒泡）。此选择器扩展了获取焦点生效范围

3、UI元素伪类选择器

选择器	含义
E:default	匹配被默认选中的表单元素，比如复选框、单选按钮或者select下拉菜单
E:checked	匹配处于选中状态(checked)的元素
E:enabled	匹配处于可用状态的元素
E:disabled	匹配处于禁用状态的元素

4、结构性伪类选择器

选择器	示例	含义
E:not()	li:not(.demo)	匹配所有的li元素，然后通过:not将class属性值为"demo"的元素筛选掉。
E:root	html:root	匹配文档的根元素，一般来讲就是HTML
E:lang()	p:lang(zh-cn)	设置使用特殊语言的p元素的样式
E:empty	li:empty	匹配内容为空的li元素
E:target	p:target	匹配被激活的目标元素，点击锚点链接时，目标元素被激活
E:first-child	li:first-child	匹配父元素中第一位类型为li的子元素
E:last-child	li:last-child	匹配父元素中最后一位类型为li的子元素
E:only-child	li:only-child	匹配父元素中惟一的类型为li的子元素
E:nth-child(n)	li:nth-child(2)	匹配父元素中正数第2个的类型为li的子元素
E:nth-last-child(n)	li:nth-last-child(2)	匹配父元素中倒数第2个类型为li的子元素
E:first-of-type	li:first-of-type	匹配父元素下li类型子元素集合中，处于同标签类型第一位的元素。
E:last-of-type	li:last-of-type	匹配父元素下li类型子元素集合中，处于同标签类型最后一位的元素。
E:only-of-type	li:only-of-type	匹配父元素下唯一存在的li类型子元素。
E:nth-of-type(n)	li:nth-of-type(1)	匹配同级type标签类型元素集合中的第1个元素
E:nth-last-of-type(n)	nth-last-of-type(1)	匹配同级type标签类型元素集合中的倒数第1个元素
E:optional	input:optional	匹配非必需表单元素
E:out-of-range	input:out-of-range	匹配值不在指定区间的表单元素
E:read-only	input:read-only	匹配只读（readonly属性）表单元素
E:read-write	input:read-write	匹配可读写表单元素，此选择器仅对input和textarea表单元素有效。
E:required	input:required	匹配具有required属性的表单元素
E:valid	input[type=text]:valid	匹配HTML5表单验证通过的元素

看完这篇文章，你就懂nth-child了

5、属性选择器

选择器	示例	含义
E[att]	li[class]	匹配具有class属性的li元素
E[att=”val”]	li[class=“demo”]	匹配具有class属性，且属性值是demo的li元素
E[att~=”val”]	li[class~=“demo”]	匹配具有class属性，且属性值为一个用空格分隔的字词列表，并且列表中的某个字词等于demo的li元素
E[att^=”val”]	li[class^=“demo”]	匹配具有class属性，且属性值以demo开头的li元素
E[att$=”val”]	li[class$=“demo”]	匹配具有class属性，且属性值为以demo结尾的li元素
E[att*=”val”]	li[class*=“demo”]	匹配具有class属性，且属性值包含demo的li元素

E[att|=”val”] li[class|=“demo”] 匹配具有class属性，且属性值是以"demo"开头并用"-"分割的li元素

6、伪元素选择器

选择器	示例	含义
E::selection	div::selection	匹配被选中的文本
E::after	.demo::after	设置在对象后（依据对象树的逻辑结构）产生的内容
E::before	.demo::before	设置在元素内部前面（依据对象树的逻辑结构）产生的内容
E::first-line	div::first-line	匹配元素内第一行
E::first-letter	div::first-letter	匹配指定元素内第一个字符。
content	.demo:after{ content:“添加的内容”; color:red;}	规定要插入的字符串内容，通常要和伪类选择器一起使用。

拓展阅读

选择器优先级的计算