CSS选择器

Mr.ZhaoAbout 12 min

选择器 (选择符)就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的

1. CSS基础选择器

基础选择器包括：

通配符选择器
标签（元素）选择器
类选择器
id 选择器

1. 通配符选择器

作用：可以选中所有的 HTML 元素

语法：

* {
    属性名: 属性值;  
}

例：

* {
    margin: 0;
    padding: 0;
}

2. 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

作用：为页面中某种元素统一设置样式

语法：

标签名{
    属性名：属性值
}

例：

/* 选中所有h1元素 */
h1 { 
	color: orange; 
	font-size: 40px;
} 

/* 选中所有p元素 */ 

p { 
	color: blue; 
	font-size: 60px; 
}

3. 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

作用：根据元素的 class 值，来选中某些元素

语法：

.类名 {
    属性名: 属性值;  
}

例：

/* 选中所有class值为speak的元素 */ 
.speak { 
	color: red; 
} 
/* 选中所有class值为answer的元素 */ 
.answer {
	color: blue;
}

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点号 . 显示
类选择器使用.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
可以理解为给这个标签起了一个名字，来表示
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的

注意：在标签 class 属性中可以写多个类名，多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式

4. id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

作用：根据元素的 id 属性值，来精准的选中某个元素

语法：

#id值 {
    属性名: 属性值;  
}

例：

/* 选中id值为earthy的那个元素 */ 
#earthy { 
	color: red; 
	font-size: 60px; 
}

注意：

id 属性值：尽量由字母、数字、下划线 _ 、短杠 - 组成，最好以字母开头、不要包含空格、区分大小写
一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同
一个元素可以同时拥有 id 和 class 属性

5. 选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	`p{color: red};`
类选择器	可以选出 1 个或多个标签	可以根据需求选择	非常多	`. nav{color: red;}`
id 选择器	一次只能选择 1 个标签	ID 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	`# nav{color: red;}`
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	`* {color: red;}`

2. CSS复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

常用的复合选择器包括：

交集选择器
并集选择器
后代选择器
子元素选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器
……

1. 交集选择器

作用：选中同时符合多个条件的元素

语法：

选择器1选择器2选择器3...选择器n {
	样式声明
}

例：

/* 选中类名为beauty的p元素，此种写法用的非常多 */
p.beauty { 
	color: blue; 
}
/* 选中：类名包含rich和beauty的元素 */ 
.rich.beauty { 
	color: green;
}

注意：

有标签名，标签名必须写在前面
id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

2. 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

语法：

选择器1, 选择器2, 选择器3, ... 选择器n {
	样式声明
}

例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi, 
.rich,
.beauty {
	font-size: 40px;
	background-color: skyblue; 
	width: 200px; 
}

注意：

并集选择器，我们一般竖着写
任何形式的选择器，都可以作为并集选择器的一部分
并集选择器，通常用于集体声明，可以缩小样式表体积

3. 基于HTML元素间的关系的选择器

分为：父元素、子元素、祖先元素、后代元素、兄弟元素

父元素：直接包裹某个元素的元素，就是该元素的父元素

子元素：被父元素直接包含的元素（简记：儿子元素）

祖先元素：父亲的父亲......，一直往外找，都是祖先（父元素也算是祖先元素的一种）

后代元素：儿子的儿子......，一直往里找，都是后代（子元素，也算是后代元素的一种）

兄弟元素：具有相同父元素的元素，互为兄弟元素

1. 后代选择器

作用：选中指定元素中，符合要求的后代元素

语法：

选择器1 选择器2 选择器3 ...... 选择器n {
	样式声明
} 
/*（先写祖先，再写后代）*/

语法说明：中间用空格隔开

例：

/* 选中ul中的所有li */ 
ul li { 
	color: red; 
} 
/* 选中ul中所有li中的a */ 
ul li a {
	color: orange; 
} 
/* 选中类名为subject元素中的所有li */
.subject li { 
	color: blue; 
} 
/* 选中类名为subject元素中的所有类名为front-end的li */ 
.subject li.front-end {
	color: blue; 
}

注意：

后代选择器，最终选择的是后代，不选中祖先
儿子、孙子、重孙子，都算是后代
结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6

2. 子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

语法：

选择器1 > 选择器2 > 选择器3 > ...... 选择器n {
	样式声明
}

例：

/* div中的子代a元素 */ 
div>a {
	color: red; 
} 
/* 类名为persons的元素中的子代a元素 */ 
.persons>a{
	color: red; 
}

注意：

子代选择器，最终选择的是子代，不是父级
子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子

3. 兄弟选择器

1. 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素（所谓相邻，就是紧挨着他的下一个）

语法：

选择器1+选择器2 {
	样式声明
}

例：

/* 选中div后相邻的兄弟p元素 */
div+p {
	color:red; 
}

2. 通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素

语法：

选择器1~选择器2 {
	样式声明
}

例：

/* 选中div后的所有的兄弟p元素 */
div~p {
	color:red; 
}

4. 属性选择器

作用：选中属性值符合一定要求的元素

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att="val"]	选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]	匹配具有 att 属性且值以 val 开头的 E 元素
E[att$="val"]	匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]	匹配具有 att 属性且值中含有 val 的 E 元素

示例代码：

 /* 只选择 type=text 文本框的 input 选取出来 */
input[type=text] {
    color: pink;
}
/* 选择首先是 div 然后 具有 class 属性 并且属性值 必须是 icon 开头的这些元素 */
div[class^=icon] {
    color: red;
}
/* 选择首先是 section 然后 具有 class 属性 并且属性值 必须是 data 结尾的这些元素 */
section[class$=data] {
    color: blue;
}

属性选择器，按照字面意思，都是根据标签中的属性来选择元素，属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器，属性选择器也可以选择出来自定义的属性

5. 伪类选择器

作用：选中特殊状态的元素

1. 动态伪类

:link 超链接未被访问的状态

:visited 超链接访问过的状态

:hover 鼠标悬停在元素上的状态

:active 元素激活的状态

:focus 获取焦点的元素

注意：

激活表示按下鼠标不松开
为了确保生效，请按照 LVHA 的顺序声明 :link － :visited － :hover － :active
表单类元素才能使用 :focus 伪类，当用户点击元素、触摸元素、通过键盘的 tab 键等方法选择元素时，就是获得焦点

2. 结构伪类

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器选择里面的子元素

选择符	简介
:first-child	所有兄弟元素中的第一个
:last-child	所有兄弟元素中的最后一个
:nth-child (n)	所有兄弟元素中的第 n 个
:first-of-type	所有同类型兄弟元素中的第一个
:last-of-type	所有同类型兄弟元素中的最后一个
:nth-of-type (n)	所有同类型兄弟元素中的第n个

关于 n 的值：

0 或不写 ：什么都选不中 —— 几乎不用
n ：选中所有子元素 —— 几乎不用
1~正无穷的整数 ：选中对应序号的子元素
2n 或 even ：选中序号为偶数的子元素
2n+1 或 odd ：选中序号为奇数的子元素
-n+3 ：选中的是前 3 个
n 可以是公式

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第 n 个
:only-child 选择没有兄弟的元素（独生子女）
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）

3. 否定伪类

:not(选择器) 排除满足括号中条件的元素

4. UI伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有 disabled 属性）

5. 目标伪类

:target 选中锚点指向的元素

6. 语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

6. 伪元素选择器

作用：选中元素中的有一些特殊位置

::first-letter 选中元素中的第一个文字

::first-line 选中元素中的第一行文字

::selection 选中被鼠标选中的内容

::placeholder 选中输入框的提示文字

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

Demo 演示

<style>
span::before {
    /* 这个content是必须要写的 */
    content: '我';
}
span::after {
    content: '小猪佩奇';
}
</style>
<body>
	<span>是</span>
</body>

注意：

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

3. 选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了

1. 简单描述

!important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器

2. 详细描述

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数
b : 类、伪类、属性选择器的个数
c : 元素、伪元素选择器的个数

例：

选择器	权重
`ul>li`	(0,0,2)
`div ul>li p a span`	(0,0,6)
`#a .slogan`	(1,1,0)
`#a .slogan a`	(1,1,1)
`#a .slogan a:hover`	(1,2,1)

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比

例：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

特殊规则：

行内样式权重大于所有选择器
!important 的权重，大于行内样式，大于所有选择器，权重最高！

图示：

CSS选择器

# 1. CSS基础选择器

# 1. 通配符选择器

# 2. 标签选择器

# 3. 类选择器

# 4. id选择器

# 5. 选择器总结

# 2. CSS复合选择器

# 1. 交集选择器

# 2. 并集选择器

# 3. 基于HTML元素间的关系的选择器

# 1. 后代选择器

# 2. 子代选择器

# 3. 兄弟选择器

# 1. 相邻兄弟选择器

# 2. 通用兄弟选择器

# 4. 属性选择器

# 5. 伪类选择器

# 1. 动态伪类

# 2. 结构伪类

# 3. 否定伪类

# 4. UI伪类

# 5. 目标伪类

# 6. 语言伪类

# 6. 伪元素选择器

# 3. 选择器的优先级

# 1. 简单描述

# 2. 详细描述