-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
179 lines (130 loc) · 5.63 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
---
title: CSS 选择器
slug: Learn/CSS/Building_blocks/Selectors
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
{{Glossary("CSS")}}中,选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有 CSS 选择器提供了很多种方法,所以在选择要样式化的元素时,我们可以做到很精细的地步。本文和本文的子篇中,我们将会详细地讲授选择器的不同使用方式,并了解它们的工作原理。
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">学习前提:</th>
<td>
计算机的基本知识,
<a
href="/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software"
>安装了基础软件</a
>,<a
href="/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files"
>处理文件</a
>的基本知识,HTML 基础(学习<a
href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
>HTML 介绍</a
>)以及对 CSS 工作方式的了解(学习<a
href="/zh-CN/docs/Learn/CSS/First_steps"
>CSS 初步</a
>)
</td>
</tr>
<tr>
<th scope="row">目标:</th>
<td>详细学习 CSS 选择器的工作方式。</td>
</tr>
</tbody>
</table>
## 选择器是什么?
你也许已经见过选择器了。CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素,叫做“选择器的对象”。
![Some code with the h1 highlighted.](selector.png)
前面的文章中,你也许已经遇到过几种不同的选择器,了解到选择器可以以不同的方式选择元素,比如选择诸如`h1`的元素,或者是根据 class (类) 选择例如`.special`。
CSS 中,选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样,它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在[CSS 3](https://www.w3.org/TR/selectors-3/)中定义的,这是一个成熟的规范,因此你会发现浏览器对这些选择器有良好的支持。
## 选择器列表
如果你有多个使用相同样式的 CSS 选择器,那么这些单独的选择器可以被混编为一个“选择器列表”,这样,规则就可以应用到所有的单个选择器上了。例如,如果我的`h1`和`.special`类有相同的 CSS,那么我可以把它们写成两个分开的规则。
```css
h1 {
color: blue;
}
.special {
color: blue;
}
```
我也可以将它们组合起来,在它们之间加上一个逗号,变为选择器列表。
```css-nolint
h1, .special {
color: blue;
}
```
空格可以在逗号前或后,你可能还会发现如果每个选择器都另起一行,会更好读些。
```css
h1,
.special {
color: blue;
}
```
在下面的实时示例中,试着把两个有相同声明的选择器组合起来。外观在组合起来以后应该还是一样的。
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
当你使用选择器列表时,如果任何一个选择器无效 (存在语���错误),那么整条规则都会被忽略。
在下面的示例中,无效的 class 选择器会被忽略,而`h1`选择器仍会被样式化。
```css
h1 {
color: blue;
}
..special {
color: blue;
}
```
但是在被组合起来以后,整个规则都会失效,无论是`h1`还是这个 class 都不会被样式化。
```css
h1,
..special {
color: blue;
}
```
## 选择器的种类
有几组不同的选择器,知道了需要哪种选择器,你会更容易正确使用它们。在本文的子篇中,我们将会来更详细地看下不同种类的选择器。
### 类型、类和 ID 选择器
这个选择器组,第一个是指向了所有 HTML 元素 `<h1>`。
```css
h1 {
}
```
它也包含了一个 class 的选择器:
```css
.box {
}
```
亦或,一个 id 选择器:
```css
#unique {
}
```
### 标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式:
```css
a[title] {
}
```
或者根据一个有特定值的标签属性是否存在来选择:
```css
a[href="https://example.com"]
{
}
```
### 伪类与伪元素
这组选择器包含了伪类,用来样式化一个元素的特定状态。例如`:hover`伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素:
```css
a:hover {
}
```
它还可以包含了伪元素,选择一个元素的某个部分而不是元素自己。例如,`::first-line`是会选择一个元素(下面的情况中是`<p>`)中的第一行,类似`<span>`包在了第一个被格式化的行外面,然后选择这个`<span>`。
```css
p::first-line {
}
```
### 运算符
最后一组选择器可以将其他选择器组合起来,更复杂的选择元素。下面的示例用运算符(`>`)选择了`<article>`元素的初代子元素。
```css
article > p {
}
```
## 接下来要做的事情
你可以看下下面的选择器参考表,可以获得到这个学习章节——或者总体来说是 MDN 上——的各种选择器的直接链接;你也可以继续下去,开始你的了解[类型、类和 ID 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)的旅程。
{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}