CSS3选择器

CSS3选择器详细分类如下图：

一、核心选择器

1、标签选择器

标签选择器又叫元素选择器，简单来说， 使用 元素名称就 可以直接选中元素进行样式修饰 。

<style>
 div{
   height:100px; border:1px solid red;
  }
</style>
<div>one</div>

 2、id选择器

id选择器 以" # "开头，后面紧跟一个ID名 ，在一个文档中， ID 值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

<style> 
 #header { background-color: aqua; }
</style>
<div id="header">haha</div>

3、类选择器

类选择器以点" ."开头，后面紧跟一个类名 。类名不允许有空格，与元素中 class 属性的值保持一致。一个元素可以有多个class 的值，每个值通过空格分割开。类名相同的元素属于一类元素。

<style>
  .first{font-weight: bold;}
</style>
<ul>
 <li class="first">HTML</li>
</ul>

4、普遍选择器

使用" *”来表示 普遍选择器，表示选择所有元素，通常用在组合选择器中。

div.left>*{ width:200px; background-color:#fafafa}
//选择class为left的div的所有子元素

5、并且选择器

并且选择器是多个选择器配合使用。

ul.dev{}//选择class为dev的ul标签

6、和选择器

多个选择器组合使用，通常使用逗号分割。

div,.one,#tt{} //表示选择div元素，class为one的元素以及id为tt的元素

二、层次选择器

1、子代选择器

使用 “>” 隔开两个选择器，前一个选择器选择到父元素，后一个选择器对子元素进行过滤。

ul.menu>li{}//选中class为menu的ul标签的所有li元素

2、后代选择器

使用 “ ” 隔开两个选择器，前一个选择器选择到父元素，后一个选择器对后代元素进行过滤，包含子元素、孙元素等。

ul.menu li{}//选中类名为menu的ul标签的所有后代li元素

3、兄弟选择器

使用 “+” 隔开两个兄弟，表示下一个兄弟；使用 “~” 隔开两个选择器，表示之后所有的兄弟。

".one+"表示选择class为one元素的下一个兄弟元素。
".two~"表示选择class为two元素之后的所有兄弟元素。

三、属性选择器

[attr] 选择具有attr 属性的元素、无论该属性的值是什么

[attr=val] 选择具有 attr 属性的、并且 attr 的值为 val 元素

[attr^=val] 选择具有 attr 属性的、并且 attr 的值以 val 开头的元素

[attr$=val] 选择具有 attr 属性的、并且 attr 的值以 val 结尾的元素

[attr*=val] 选择具有 attr 属性的、并且 attr 的值包含 val 的元素

[attr~=val] 选择具有 attr 属性的、并且 attr 的值之一为 val 的元素

div[name]{}//选择div元素，并且该元素具有name属性
div[name=header]{}//选择div元素，并且该元素中的name属性值为header
div[name*=header]{}//选择div元素，并且该元素中的name属性值包含header
div[name^=h]{}//选择div元素，并且该元素中的name属性值以h开头
div[name$=h]{}//选择div元素，并且该元素中的name属性值以h结尾

四、伪类选择器

子元素相关的：

:only-child	选中独生子元素
:first-child	选中作为别人第一个孩子的元素
:last-child	选中作为别人最后一个孩子的元素
:nth-child(n)	选中作为别人第几个孩子元素的元素
:nth-last-child(n)	选中作为别人倒数第几个孩子的元素
:first-of-type	选中作为别人每种类型中的第一个孩子的元素
:last-of-type	选中作为别人每种类型中的最后一个孩子的元素
:nth-of-type(n)	选中作为别人每种类型中的第几个孩子的元素
:nth-last-of-type(n)	选中作为别人每种类型中的倒数第几个孩子的元素

ul.nav>li:first-child{}//选择class为nav的ul的li的第一个元素
ul.nav>li:nth-child(参数){}

nth-child表示第几个孩子

参数：

1. 数字1、2，如果有1表示第一个孩子节点元素
2. 表达式2n+1，表示第1、3、5....孩子节点元素
3. 关键字odd、even，表示奇数、偶数孩子节点元素

元素状态相关的：

:link	未被访问的状态，常用于 a 标签
:visited	已访问过的状态，常用于 a 标签
:hover	鼠标悬停的状态，常用于 a 标签，其他标签也可用
:active	活动的状态， 常用于 a 标签，其他标签也可用
:focus	聚焦的状态
:checked	用户选中的单选按钮和复选按钮
:default	默认选中的单选按钮和复选按钮
:enabled 、 :disabled	可用的表单控件、禁用的表单控件
:valid 、 :invalid	通过验证的、不通过验证的
:required 、 :optional	必填的和选填的
:in-range 、 :out-of-range	在范围内的、在范围外的

a:link{color:pink;}//表示未访问的a标签的字体颜色为粉色
a:visited{color:black}//表示访问过的a标签字体为黑色
a:hover{color:yellow}//表示鼠标悬停时a标签的字体颜色为黄色
a:active{color:blue}//表示点击时的字体颜色为蓝色

五、伪元素选择器

伪元素以 " :: " 开头，用在选择器后，用于选择指定的元素。

::after	选中之后的不存在的节点，可配合 content 属性进行内容填充
::before	选中之前的不存在的节点，可配合 content 属性进行内容填充
::first-letter	选中第一个文本字符
::first-line	选中第一行文本
::selection	选中用户在选择的时候的文本