CSS3新增的选择器有哪些?

CSS3新增选择器！

CSS3

通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器

用法	描述
element1~element2	选中element1后的所有同级element2元素。（注意：与element1+element2的区别，不必相邻且可选中多个）
[element^=value]	选中element属性值中前几个字母为value的元素。
[element$=value]	选中element属性值以value结尾的元素。
[element*=value]	选中element属性值中包含value的元素。
:first-of-type	选中属于父元素的第一个指定类型的子元素。
:last-of-type	选中属于父元素的最后一个指定类型的子元素。
:only-of-type	选中属于父元素的仅有指定类型的元素。
:only-child	选中属于父元素的唯一一个子元素
:nth-child(n)	选中指定位置的子元素。(n可以是具体数字也可以是表达式)
:nth-last-child(n)	选中指定位置的子元素,从最后一个子元素开始计数。(n可以是具体数字也可以是表达式)
:nth-of-type(n)	选中指定位置的指定类型元素。(n可以是具体数字也可以是表达式)
:nth-last-of-type(n)	选中指定位置的指定类型元素,从最后一个子元素开始计数。(n可以是具体数字也可以是表达式)
:empty	选择没有子元素的元素。
:root	选择文档的根元素。
:enabled	选择每个启用的< input>元素。
:disabled	选择每个禁用的< input>元素。
:checked	选择每个被选中的< input>元素。(只有Opera浏览器支持该选择器）
:not(selector)	选择非指定选择器的元素。(注意：不能嵌套，)
::selection)	选择被用户选取的部分元素。

然后是CSS3之前已有的选择器

CSS1

id选择器 、class选择器 、标签选择器 、群组选择器 、后代选择器 、伪类选择器

用法	描述
#id	选择 id=“xxxx” 的所有元素。（具有唯一性，一个页面只可使用一次）
.class	选择 class=“xxxx” 的所有元素。
element	选择所有 element (标签） 元素。
element1,element2	可同时选择多个选择器，各个选择器中间用逗号隔开。
element1 element2	选择element1的所有后代选择器为element2的元素。
:link	伪类选择器，设置默认鼠标未操作过的效果。
:visited	伪类选择器，设置访问过后的效果。
:hover	伪类选择器，设置鼠标移入的效果。
:active	伪类选择器，设置鼠标点击未释放的效果。
:first-letter	选中指定选择器中的首字母
:first-line	选中指定选择器中的第一行

CSS2

通配符选择器 、子代选择器 、相邻兄弟选择器、属性选择器、伪类选择器

用法	描述
*	选择所有元素。（常用于重置css代码）
element1>element2	选中element1下的所有选择器为element2的子代元素。
element1+element2	选中element1紧接的下一个同级element2元素且element1和element2拥有相同的父元素。（注意：相邻和选中一个必须同时满足）
element1~element2	选中element1后的所有同级element2元素且element1和element2拥有相同的父元素。（注意：同级即可，不必相邻，可选中多个）
[element]	选中带有element的元素。
[element=value]	选中element属性值为value的元素。
[element~=value]	选中element属性值中包含独立单词为value的所有元素，若还有其他单词可空格隔开。
:focus	选中获得焦点的元素。
:first-child	选中属于父元素的第一个子元素。
:before	给指定选择器标签内最开始加入一个内联元素
:after	给指定选择器标签内最末尾加入一个内联元素
:lang(language)	选中指定元素中lang属性值开头为language的元素。

注意区分：

1. :first-child 与 :first-of-type ( :last-child 与 :last-of-type 同理)
   前者是第一个子元素，后者是第一个该类型的子元素。

<ul>
	<li>我是 li:first-child 也是 li:first-of-type !</li>
	<li></li>
	<p>我只是 p:first-of-type !</li>
	<li></li>
</ul>

2. :first-child 与 nth-child(n)
   前者只能选择第一个子元素，后者可以选择多个指定的子元素。

<ul>
	<li>我是 li:first-child ！</li>
	<li>我是 li:nth-child(2) !</li>
	<li></li>
	<li></li>
</ul>

3. nth-child(n) 与 nth-of-type(n)
   前者既要是第n个也要是指定的子元素，后者只需要是第n个指定类型的子元素。

<ul>
	<li></li>
	<li>我是 li:nth-child(2) 也是  li:nth-of-type(2)!</p>
	<li></li>
	<p></p>
	<li>我是 li:nth-of-type(4) 但不是  li:nth-child(4)!</li>
</ul>

4. :only-of-type 与 :only-child
   前者具有唯一性，但可以有相邻的其他元素。后者唯一且不能有其他相邻元素。

<ul>
	<li></li>
	<p>我是 p:only-of-type ，我有其他非p元素的兄弟 !</p>
	<li></li>
	<li></li>
</ul>

<ul>
	<li>我是 li:only-child ，我没有兄弟，一个也没有!</li>
</ul>

5. element1+element2 与 element~element2
   共同点：有同一个父元素
   不同点：前者只选择一个且相邻兄弟，后者可选择多个不相邻兄弟。

	<div>
		<h2></h2>
		<p> 我是 h2+p 也是 h2~p !</p>
		<p> 我只是h2~p </p>
		<p> 我只是h2~p </p>
	</div>

6. [element^=value] 与 [element|=value]
   前者只要属性值开头是value即可，后者需要value开头并且value要是单独一个单独，若后面有单词需要用 - 隔开。

使用注意事项：

• 权重计算：行内样式(1000) >id(0100)>class=伪类选择器=属性选择器(0010)>元素选择器=伪元素选择器(0001)>*通配符选择器(0000)
• 有些选择器部分浏览器不兼容，或低版本浏览器不兼容，使用前需查清楚。
• :link 、:visited 、:hover 、:active 在使用的时候需注意，如果同时使用要按前面所写顺序，简称LoVe HAte（至于为什么要按顺序呢，涉及到层叠，就又是另一个话题啦~）。:link和:visited只能用在< a>标签上，而:hover和:active使用范围相对较广。

~ 小彩蛋 ~
给大家推荐一个查找资料的小技巧，百度输入 标签名 mdn。我就感觉它是中文版官网了，不容易出错。当然，英文好的可直接官网，当我没说。 /狗头保命 逆战加油！

来源：CSDN

作者：crane XXXX

链接：https://blog.csdn.net/FMQXtoCY/article/details/104445130