你不知道的CSS选择器（之后会补上浏览器兼容性）

日常工作中，css都是美工写好的，下面这些选择器，已经很久没用了，感觉已经很生疏，甚至有些是我没有用过的，现在来做个总结，算是查缺补漏了，欢迎大家评论提点。

---

1、最常用的，无论是不是前端工程师，都会用的有：

选择器	例子	例子描述	CSS版本
.class	.name	选择class="name"的所有元素	1
#id	#name	选择id=“name”的所有元素	1
*	*	选择所有元素	2
ele	div	选择所有<div>元素	1
ele,ele	div,p	选择<div>元素和所有<p>元素	1
ele ele	div p	选择<div>元素内部所有<p>元素	1
ele>ele	div>p	选择父元素为<div>元素的所有<p>元素	2
ele+ele	div+p	选择紧接在div元素之后所有<p>元素	2

 

 

 

 

 

 

 

 

 

---

2、有关于属性的选择器（关于属性，大家可能都有纠结过，什么时候该写引号呢，结论就是只有属性值可以写引号，属性名加了引号选择器就失效了）

尝试一些，文档中并没有讲述很清楚的内容,尽量列出一些使用场景。

经过测试，属性值是可以带符号的比如 “-” ，我们通常用来命名classname。

选择器	例子	例子描述	CSS版本
[attr]	[target]	选择带有target属性的所有元素。	2
[attr=val]	[target=_blank] [target="_blank"]	选择target="_blank"的所有元素。	2
[attr~=val]	[title~=flower]	选择title属性包含单词“flower”的所有元素。 （在这里包含的意思就是全等于，如果属性是“four-flower”，选择器不生效）。	2
[attr|=val]	[title|=flower]	选择title属性值以“flower”开头的所有元素。 属性值需要使用连字符(-)：flower-four，选择器才生效。 如果写的是flowerfour，选择器则无效。 应用场景举例：可以针对于我们一个模块的样式改变，如果一个订单模块的classname命名都是以order-开头，其他模块都没有使用order来命名时。在全局样式下，只改变order模块的字体或者颜色，就可以使用这个选择器（[class|=order]）。	2
[attr^=val]	[title^=flower]	选择title属性值以“flower”开头的所有元素。  title=“flowerfour”，这一个选择器对于强化了两种筛选。 （只能说CSS3真的是强大，哈哈） 应用场景举例：区分<a>元素的src属性的两种开头方式：http和https。	3
[attr$=val]	[title$=flower]	选择title属性以"flower"结尾的所有元素。 应用场景举例：以文件后缀来查找元素。	3
[attr*=val]	[title*=flower]	选择title属性包含单词“flower”的所有元素。 只要包含了flower字符，就满足筛选。 这个是范围最大的筛选。	3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

3、有关于元素状态的选择器

 

选择器	例子	例子描述	CSS版本
:link	a:link	选择所有未被访问的链接。<a>元素专用。	1
:visited	a:visited	选择所有已被访问的链接。<a>元素专用。	1
:active	a:active	选择活动链接。<a>元素专用。	1
:hover	div:hover	选择鼠标指针位于其上的链接。所有元素通用。	1
:focus	input:focus	选择获得焦点的input元素。<input>元素专用。	2
:target	#news:target	选择当前活动的#news元素。 应用场景举例： <a href="#news">点击跳转到锚点位置</a> <p id="news">锚点位置的样式则改变</p> IE9之前不支持target选择器。 所有元素通用。	3
:enabled	input:enabled	选择每个启用的<input>元素。<input>元素专用。	3
:disabled	input:disabled	选择每个禁用的<input>元素。<input>元素专用。	3
:checked	input:checked	选择每个被选中的<input>元素。<input>元素专用。	3
::selection	::selection	选择被用户选取的元素部分。	3

 

 

 

 

 

 

 

 

 

 

 

 

 

---

4、有关于父子兄弟元素的选择器

选择器	例子	例子描述	CSS版本
:root	:root	选择文档根元素。	3
ele~ele	p~ul	选择前面有<p>元素的每个<ul>元素。 这里的<ul>元素不要求紧接在后，只要有<p>在前面就可以。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个<p>元素的每个<p>元素。 也就是说，在HTML页面中，所有元素中的第一个<p>元素都符合条件。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后一个<p>元素的每个<p>元素。 也就是说，在HTML页面中，所有元素中的最后一个<p>元素都符合条件。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的<p>元素的每个<p>元素。 也就是说，在HTML页面中，父元素中如果只有一个<p>元素，那么这个<p>元素就符合条件。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个<p>元素的而每个<p>元素	3
:nth-last-of-type(2)	p:nth-last-of-type(2)	与上，求同存异。但从最后一个开始计数。	3
:first-child	p:first-child	选择属于父元素的第一个子元素的每个<p>元素。 也就是说，在各级dom节点树中，只要第一个节点是<p>标签，则选择器生效。	2
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个<p>元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素第二个<p>元素的每个<p>元素。 也就是说，在HTML页面中，是父元素的第二个元素，并且是p元素的符合条件。	3
:nth-last-child(n)	p:nth-last-child(2)	与上，求同存异。但从最后一个开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个<p>元素。	3