CSS选择器——cssSelector定位方式详解

基本css选择器

CSS选择器中，最常用的选择器如下：

选择器	描述	举例
*	通配选择器，选择所有的元素	*
<type>	选择特定类型的元素，支持基本HTML标签	h1
.<class>	选择具有特定class的元素。	.class1
<type>.<class>	特定类型和特定class的交集。（直接将多个选择器连着一起表示交集）	h1.class1
#<id>	选择具有特定id属性值的元素	#id1

 

属性选择器

除了最基本的核心选择器外，还有可以基于属性的属性选择器：

​选择器	描述	举例
[attr]	选取定义attr属性的元素，即使该属性没有值	[placeholder]
[attr="val"]	选取attr属性等于val的元素	[placeholder="请输入关键词"]
[attr^="val"]	选取attr属性开头为val的元素	[placeholder^="请输入"]
[attr$="val"]	选取attr属性结尾为val的元素	[placeholder$="关键词"]
[attr*="val"]	选取attr属性包含val的元素	[placeholder*="入关"]
[attr~="val"]	选取attr属性包含多个空格分隔的属性，其中一个等于val的元素	[placeholder~="关键词"]
[attr|="val"]	选取attr属性等于val的元素或第一个属性值等于val的元素	[placeholder|="关键词"]

关系选择器

有一些选择器是基于层级之间的关系，这类选择器称之为关系选择器。

选择器	描述	举例
<selector> <selector>	第二个选择器为第一个选择器的后代元素，选取第二个选择器匹配结果	.class1 h1
<selector> > <selector>	第二个选择器为第一个选择器的直接子元素，选取第二个选择器匹配结果	.class1 > *
<selector> + <selector>	第二个选择器为第一个选择器的兄弟元素，选取第二个选择器的下一兄弟元素	.class1 + [lang]
<selector> ~ <selector>	第二个选择器为第一个选择器的兄弟元素，选取第二个选择器的全部兄弟元素	.class1 ~ [lang]

联合选择器与反选择器

利用联合选择器与反选择器，可以实现与和或的关系。

选择器	描述	举例
<selector>,<selector>	属于第一个选择器的元素或者是属于第二个选择器的元素	h1, h2
:not(<selector>)	不属于选择器选中的元素	:not(html)

伪元素和伪类选择器

CSS选择器支持了伪元素和伪类选择器。

:active	鼠标点击的元素
:checked	处于选中状态的元素
:default	选取默认值的元素
:disabled	选取处于禁用状态的元素
:empty	选取没有任何内容的元素
:enabled	选取处于可用状态的元素
:first-child	选取元素的第一个子元素
:first-letter	选取文本的第一个字母
:first-line	选取文本的第一行
:focus	选取得到焦点的元素
:hover	选取鼠标悬停的元素
:in-range	选取范围之内的元素
:out-of-range	选取范围之外的元素
:lang(<language>)	选取lang属性为language的元素
:last-child	选取元素的最后一个子元素
:link	选取链接元素
:nth-child(n)	选取第n个子元素
:nth-last-child(n)	选取倒数第n个子元素
:nth-of-type(n)	选取同类型的第n个元素
:nth-last-of-type(n)	选择同类型的倒数第n个元素
:only-chid	选择元素中唯一的子元素
:only-of-type	选取元素中唯一与指定类型相同的元素
:required	选取具有require属性的元素
:optional	选取没有require属性的元素
:root	选取文档的根元素
:target	选取URL中锚点引用的元素
:valid	选取表单中验证valid元素
:invalid	选取表单中验证未通过验证的元素
:visited	选取用于已经访问过的链接元素。