选择器的分类整理

最近学习发现忘记了许多关于选择器的使用，于是复习了一波，现在将内容做了以下整理

关于选择器大概可以分为以下几类： 标签选择器、类选择器、ID选择器、普遍选择器、层次选择器、多选择器、属性选择器、伪类选择器、伪元素选择器 。具体如下：

标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素

名称直接选中元素即可

例如：

<style>

p{

height:100px;

border:1px solid red;

}

</style>

类选择器（ Class selectors ）

类选择器以点 "." 开头，后面紧跟一个类名。类名不允许有空格，与元素中 class 属性的

值保持一致。一个元素可以有多个 class 的值，每个值通过空格分割开。类名相同的元素

属于一类元素。

例如：

<style>

.first{font-weight: bold;}

.done {text-decoration: line-through;}

</style>

ID 选择器（ ID selectors ）

ID 选择器以 "#" 开头，后面紧跟一个 ID 名，在一个文档中， ID 值不能重复，因此在选

择文档中唯一元素的时候该选择器比较有用。

例如：

<style>

#polite { font-family: cursive;}

#rude { font-family: monospace;text-transform: uppercase;}

</style>

 

普遍选择器（ Universal selector ）

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

例如：

<style>

.left-nav>* { width:200px; background-color:#fafafa}

</style>

选择器-层次选择器

1.后代选择器（ descendant selector ）

l 使用 “ ” 隔开两个选择器。例如 “ul li” 表示选择 ul 的后代元素 li ， li 可以为 ul 的直接子元

素，也可以为 ul 的孙子元素。

2.子代选择器（child selector）

l 使用 “>” 隔开两个选择器。例如 “ul>li” 表示选择 ul 的直接子代元素 li,ul 的孙子元素 li 无

法被选择到。

3.相邻同胞选择器（adjacent sibling selector）   下一个兄弟元素

l 使用 “+” 隔开两个选择器。例如 ".one+*" 表示选择 class 为 "one" 元素的下一个兄弟元

素。

4.一般同胞选择器（ general sibling selector）   之后所有的兄弟元素

l 使用 “~” 隔开两个选择器。例如 ".one~*" 表示选择 class 为 "one" 元素之后的所有兄弟

元素。

选择器-多选择器

1.组合选择器

l 多个选择器组合使用，使用 “,” 分割。

l 例如 "div,.one,#tt" 表示选择 div 元素， class 为 one 的元素以及 id 为 tt 的元素

2.嵌套选择器

l 多个选择器嵌套使用。例如 "div.one" 表示 class 为 one 的 div 元素。

 

选择器-属性选择器

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

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

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

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

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

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

 

选择器-伪类选择器

伪类以 ":" 开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

1.子代元素相关的伪类选择器

l:only-child

选中独生子元素

l:first-child

选中作为别人第一个孩子的元素

l:last-child

选中作为别人最后一个孩子的元素

l:nth-child(n)

选中作为别人第几个孩子元素的元素

l:nth-last-child(n)

选中作为别人倒数第几个孩子的元素

l:first-of-type

选中作为别人每种类型中的第一个孩子的元素

l:last-of-type

选中作为别人每种类型中的最后一个孩子的元素

l:nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素

l:nth-last-of-type(n)

选中作为别人每种类型中的倒数第几个孩子的元素

ü 上面的n可以为元素的序号，也可以为特殊的字符，比如odd，even，n从1开始

2.元素状态相关伪类选择器

l :link

未被访问的状态，a标签

l :visited

已访问过的状态，a标签

l :hover

鼠标悬停的状态，a标签，其他标签也可用

l :active

活动的状态， a标签，其他标签也可用

l :focus

聚焦的状态

l :checked

用户选中的单选按钮和复选按钮

l :default

默认选中的单选按钮和复选按钮

l :enabled、 :disabled 可用的表单控件、禁用的表单控件

l :valid 、:invalid

通过验证的、不通过验证的

l :required、:optional 必填的和选填的

l :in-range 、:out-of-range

在范围内的、在范围外的

 

选择器-伪元素选择器

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

::after 选中之后的不存在的节点，可配合content属性进行内容填充

l ::before

选中之前的不存在的节点，可配合content属性进行内容填充

l ::first-letter 选中第一个文本字符

l ::first-line

选中第一行文本

l ::selection 选中用户在选择的时候的文本