CSS 选择器

选择器，用于筛选需要设置样式的 HTML 元素。

一、简单选择器

1.通用选择器

(1) 定义

用 * 匹配任何类型的元素，为所有元素设置统一的样式。

(2) 示例

1
2
3
* {
  样式;
}

2.元素选择器

(1) 定义

用元素类型名称匹配元素，为所有同类元素设置样式。

(2) 示例

1
2
3
4
5
6
h1 {
	样式;
}
p {
	样式;
}

3.类选择器

(1) 定义

用类名来匹配元素，为所有类名匹配的元素设置样式。

(2) 示例

1
2
3
4
5
6
.test {
	样式;
}

<h1 class="test">测试标题</h1>
<p class="test">测试文本</p>

4.id 选择器

(1) 定义

用 id 来匹配元素，为该元素设置样式。id 应该是唯一的。

(2) 示例

1
2
3
4
5
#test {
  样式;
}

<p id="test">测试文本</p>

​

二、组合器选择器

1.交集选择器

(1) 定义

交集，即既属于 A 又属于 B 的集合。

例如，

元素为 p 且 class 为 text ：

1
2
3
p.text {

}

(2) 语法

1
2
3
选择器1选择器2 {
	样式;
}

2.并集选择器

(1) 定义

并集，即属于 A 或属于 B 的集合。将多个选择器选择出的元素一起设为统一样式。

(2) 语法

1
2
3
选择器1, 选择器2, 选择器3 {
	样式;
}

3.后代选择器

(1) 定义

选用选择器 1 进行筛选，筛选完后再在结果中用选择器 2 筛选，··· ，继续往下筛选，直到所有选择器都选择完成。

(2) 语法

1
2
3
选择器1 选择器2 选择器3 {
	样式;
}

4.子元素选择器

(1) 定义

与后代选择器相比，每一次筛选中在上一轮筛选的直接子元素中进行筛选。

筛儿子不筛孙子

(2) 语法

1
2
3
选择器1 > 选择器2 > 选择器3 {
	样式;
}

5.相邻兄弟选择器

(1) 定义

选择紧随选择器 1 筛选出的元素之后，与它们同级，且能被选择器 2 所筛选的元素。

示例：

筛选器为 h1 + p {} ，

若

1
2
<h1>一级标题</h1>
<p>测试文本</p>

则测试文本会被应用样式。

若

1
2
3
<h1>一级标题</h1>
<h2>测试文本</h2>
<p>测试文本</p>

则此筛选器什么都没筛选出来，不会有任何元素被应用样式。

(2) 语法

1
2
3
选择器1 + 选择器2 {
	样式;
}

6.通用兄弟选择器

(1) 定义

与相邻兄弟选择器相比，同样要求在选择器 1 所选元素之后的同级元素中筛选，但不再要求相邻。

(2) 语法

1
2
3
选择器1 ~ 选择器2 {
	样式;
}

​

三、伪元素选择器

1. ::first-line

(1) 定义

用于向文本的首行添加特殊样式。

仅能作用于块级元素，对行内元素无效。

(2) 语法

1
2
3
选择器::first-line {
	样式;
}

2. ::first-letter

(1) 定义

用于向文本的首字母添加特殊样式。

仅能作用于块级元素，对行内元素无效。

(2) 语法

1
2
3
选择器::first-letter {
	样式;
}

3. ::before

(1) 定义

用于在元素之前插入内容，使用 content 属性来指定要插入的内容。

(2) 语法

1
2
3
选择器::before {
	content:内容;
}

4. ::after

(1) 定义

用于在元素之后插入内容，使用 content 属性来指定要插入的内容。

(2) 语法

1
2
3
选择器::after {
	content:内容;
}

5. ::selection

(1) 定义

用于设置元素被用户（这里的用户指浏览网页的用户）选中或处于高亮状态时的样式。

(2) 语法

1
2
3
选择器::after {
	样式;
}

​

四、伪类选择器

1.什么是伪类？

伪类用来定义元素的特殊状态。

例如：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

2.伪类选择器的类别

(1) 动态伪类选择器

(2) UI 伪类选择器

(3) 结构伪类选择器

3.伪元素和伪类的区别

(1) 伪元素

伪元素用于创建一些不在文档树中的元素，为其添加样式。

避免增设子元素，就能选中元素的某一部分。

(2) 伪类

用于当已有元素处于某个状态时，为其添加样式。

避免增设类，就能选中某一类元素。

​

五、动态伪类选择器

示例：为链接设置样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

为未访问的链接设置样式。

2. :visited

为已访问的链接设置样式。

3. :hover

为鼠标指针浮动在上面的元素设置样式。

注意：:haver 可用于所有元素，不只是链接。

4. :active

为元素被按下的那一刻设置样式。

注意：:active 可用于所有元素，不只是链接。

5. :focus

为获得焦点的 input 元素设置样式。

​

六、UI伪类选择器

1. :enabled 和 :disabled

(1) 定义

设置表单元素在可用和禁用时的样式。

(2) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style> 
	input:enabled {
		background:#ffff00;
	}
	input:disabled {
		background:#dddddd;
	}
</style>

<form>
	First name: <input><br>
	Last name: <input><br>
	Country: <input disabled value="China" /><br>
</form>

2. :checked

设置选项在被选中时的样式。

适用于单选框、多选框和下拉列表中的选项

3. :required 和 :optional

设置表单元素中必填项和可填项的样式。

指定了 required 即为必填项，未指定则为可填项。

适用于：input, select 和 textarea。

4. :default

设置默认被选中的选项的样式。

适用于按钮、被设为 checked 的单选或多选选项

5. :valid 和 :invalid

当输入的数据合法和非法时，显示的样式。

6. :in-range 和 :out-of-range

当输入的数据在范围内或在范围之外时，显示的样式。

需要通过 min 和 max 指定数据大小区间

7. :read-only 和 :read-write

为只读的输入框和可读可写的输入框指定样式。

注意：如果使用 Firefox 浏览器，需要在样式前面添加前缀 -moz-

8. :indeterminate

用于设置状态不确定的表单元素的样式。

checkbook(多选) 未做选中时， indeterminate 属性为 true ；

radio(单选) 当同名属性都未被选中时， indeterminate 为 true 。

​

七、结构伪类选择器

1. :root

匹配文档根元素，在 HTML 中，根元素始终是 <html> 。

2. :empty

匹配未定义任何内容的元素。

3. :first-child 和 :last-child

(1) 定义

用于匹配属于同一个父元素的第一个或最后一个元素。

匹配要求：

  • 该元素是其父元素的子元素中第一个或最后一个
  • 该元素的类型需要与要求匹配

(2) 语法

1
2
3
元素名:first-child {
	样式;
}

4. :first-of-type 和 :last-of-type

用于匹配属于同一个父元素的第一个或最后一个指定类型元素。

与 :first-child 和 :last-child 相比，不再要求元素必须排第一个，只需要在指定类型中排第一个即可。

可以视为将其它类型的元素忽略，只在指定元素类型中筛选。

4. :only-child

一个元素，当它的父元素仅有唯一一个元素，且它的元素类型与要求匹配时，它被选中。

5. :only-of-type

一个元素，当它是他的父元素下唯一一个指定类型的元素，它被选中。

不再要求其父元素下仅有一个子元素，需要同类元素只有一个即可。

可以视为将其它类型的元素忽略，只在指定元素类型中筛选。

6. 带参数的结构伪类选择器

(1) :nth-child(n)

匹配属于同一个父元素的第 n 个元素。

(2) :nth-last-child(n)

匹配属于同一个父元素的倒数第 n 个元素。

(3) :nth-of-type(n)

匹配属于同一个父元素的第 n 个指定类型元素。

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

匹配属于同一个父元素的倒数第 n 个指定类型元素。

7. :target

为页面内锚点设置样式。

页面内锚点主要是为了实现页面内部跳转。需要先为要跳转的元素设置好 id，然后将 a 元素的 href 指定为 “#该元素的 id 值” ，就可以实现点击后页面内跳转。

8. :lang

(1) 定义

用于为指定语言的元素设置样式。

(2) 示例

1
2
3
:lang(语言代码) {
	样式;
}

9. :not

(1) 定义

匹配所有不被指定选择器选中的元素。

(2) 语法

1
2
3
:not(选择器){
	样式;
}

​

八、属性选择器

1. [属性名]

(1) 定义

匹配包含指定属性的元素。

(2) 语法

1
2
3
[属性名]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
<style>
	[class]{
		color:blue;
	}
</style>

<h2 class="1">测试文本</h2>
<h1>Hello world</h1>
<hr>
<p>测试文本</p>
<p class="2">测试文本</p>

2. [属性名=属性值]

(1) 定义

匹配包含指定属性，且属性值与给定字符串相等的元素。

(2) 语法

1
2
3
[属性名=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
<style>
	[class="2"]{
		color:blue;
	}
</style>

<h2 class="1">测试文本</h2>
<h1>Hello world</h1>
<hr>
<p>测试文本</p>
<p class="2">测试文本</p>

3. [属性名^=属性值]

(1) 定义

匹配包含指定属性，且属性值以指定字符串开头的元素。

(2) 语法

1
2
3
[属性名^=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	[class^="abc"]{
		color:blue;
	}
</style>

<p class="xyz">测试文本</p>
<p class="abc">测试文本</p>
<p class="cabc">测试文本</p>
<p class="abcc">测试文本</p>
<p class="x-abc">测试文本</p>
<p class="abc-x">测试文本</p>
<p class="abcd-x">测试文本</p>
<p class="x abc">测试文本</p>
<p class="abc x">测试文本</p>

4. [属性名$=属性值]

(1) 定义

匹配包含指定属性，且属性值以指定字符串结尾的元素。

(2) 语法

1
2
3
[属性名$=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	[class$="abc"]{
		color:blue;
	}
</style>

<p class="xyz">测试文本</p>
<p class="abc">测试文本</p>
<p class="cabc">测试文本</p>
<p class="abcc">测试文本</p>
<p class="x-abc">测试文本</p>
<p class="abc-x">测试文本</p>
<p class="abcd-x">测试文本</p>
<p class="x abc">测试文本</p>
<p class="abc x">测试文本</p>

5. [属性名*=属性值]

(1) 定义

匹配包含指定属性，且指定字符串是其属性值的子字符串的元素。

(2) 语法

1
2
3
[属性名*=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	[class*="abc"]{
		color:blue;
	}
</style>

<p class="xyz">测试文本</p>
<p class="abc">测试文本</p>
<p class="cabc">测试文本</p>
<p class="abcc">测试文本</p>
<p class="x-abc">测试文本</p>
<p class="abc-x">测试文本</p>
<p class="abcd-x">测试文本</p>
<p class="x abc">测试文本</p>
<p class="abc x">测试文本</p>

6. [属性名~=属性值]

(1) 定义

匹配包含指定属性，且属性值中包含指定字符串的元素。

字符串-abc 不行；

字符串 abc 可以。

(2) 语法

1
2
3
[属性名~=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	[class~="abc"]{
		color:blue;
	}
</style>

<p class="xyz">测试文本</p>
<p class="abc">测试文本</p>
<p class="cabc">测试文本</p>
<p class="abcc">测试文本</p>
<p class="x-abc">测试文本</p>
<p class="abc-x">测试文本</p>
<p class="abcd-x">测试文本</p>
<p class="x abc">测试文本</p>
<p class="abc x">测试文本</p>

7. [属性名|=属性值]

(1) 定义

匹配包含指定属性，且属性值由字符进行分割，其中第一个字符串是指定字符串的元素。

(2) 语法

1
2
3
[属性名|=属性值]{
	样式;
}

(3) 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	[class|="abc"]{
		color:blue;
	}
</style>

<p class="xyz">测试文本</p>
<p class="abc">测试文本</p>
<p class="cabc">测试文本</p>
<p class="abcc">测试文本</p>
<p class="x-abc">测试文本</p>
<p class="abc-x">测试文本</p>
<p class="abcd-x">测试文本</p>
<p class="x abc">测试文本</p>
<p class="abc x">测试文本</p>

​

参考