CSS3 选择器速查表
CSS 选择器
CSS 选择器用于选择需要设置样式的内容。在 CSS 规则集中，选择器是其组成部分。CSS 选择器根据元素的 id、class、type、attribute 等信息来选择 HTML 元素。
CSS 选择器分为五类：
- 简单/基本选择器（根据名称、ID、类选择元素）
- 组合选择器（根据元素之间的特定关系选择元素）
- 伪类选择器（根据特定状态选择元素）
- 伪元素选择器（选择并设置元素的一部分样式）
- 属性选择器（根据属性或属性值选择元素）
简单选择器
| 选择器 | 例子 | 示例描述 |
|---|---|---|
| ＃ID | ＃名 | 选择 id 为“firstname”的元素 |
| 。班级 | .intro | 选择所有 class="intro" 的元素 |
| 元素类 | p.引言 | 仅选择class="intro" 的<p>元素 |
| * | * | 选择所有元素 |
| 元素 | p | 选择所有<p>元素 |
| 元素，元素，.. | div，p | 选择所有<div>元素和所有<p>元素 |
基本选择器
| 选择器 | 描述 | 例子 |
|---|---|---|
| 元素 | 类型选择器。匹配一个元素。 | p { color: red } 匹配段落 |
| 。班级 | 类选择器。匹配类属性的值。 | .warning { color: red } 匹配包含 class="warning" 的元素 |
| ＃ID | ID 选择器。匹配 id 属性的值。 | #warning { color: red } 匹配包含 id="warning" 的元素 |
| * | 通用选择器，适用于所有产品。 | * { color: red } 匹配所有内容 |
属性选择器
| 选择器 | 描述 | 例子 |
|---|---|---|
| [属性] | 匹配包含给定属性的元素。 | a[href] { color: red; } 匹配具有 href 属性的元素 |
| [attribute="x"] | 匹配包含给定属性且具有给定值的元素。 | a[href="/x/"] {color: red;} 匹配具有属性和值的元素 href="/x/" |
| [attribute~="x"] | 匹配包含给定属性且其值包含以空格分隔的子值的元素。 | `abbr[title~="x"] { color: red;}` 用于匹配标题包含“x”的缩写元素（例如标题“层叠样式表”）。 |
| [attribute|="x"] | 匹配包含给定属性且其值包含以连字符分隔的子值的元素。例如， 匹配 lang 属性包含“en”（例如 lang="en-gb") 中的 html 元素。 |
|
| [attribute^="x"] | 匹配包含给定属性且其值以某个特定字符开头的元素。 | a[href^="http://"] {color: red;} 匹配 href 属性值以 'http://' 开头的元素 |
| [attribute$="x"] | 匹配包含给定属性且值以特定内容结尾的元素。 | a[href$=".com"] {color: red; } 匹配 href 属性值以 '.com' 结尾的元素 |
| [attribute*="x"] | 匹配包含给定属性且其值包含内容的元素。 | a[href*="hdog"] {color: red;} 匹配 href 属性值为 'hdog' 的元素 |
伪类选择器
| 选择器 | 描述 | 例子 |
|---|---|---|
| ：关联 | 匹配到一个尚未访问过的链接。 | a:link { 颜色: 蓝色 } |
| 已访问 | 匹配一个已访问过的链接。 | a:visited { color: purple } |
| ：积极的 | 匹配正在被激活的元素，例如正在被点击的链接。 | a:active { 颜色: 红色 } |
| ：徘徊 | 匹配光标悬停在其框上的元素。 | a:hover { text-decoration: none } |
| ：重点 | 匹配具有焦点的元素，例如已被 Tab 键选中的元素。 | a:focus { border: 1px solid yellow } |
| ：目标 | 匹配已链接到的元素（例如，通过<a href="#x"…"）。 | h2:target { color: red } 匹配已链接到的二级标题 |
| :lang() | 与给定语言的元素匹配。 | p:lang(fr) { color: red } 匹配声明为法语或被视为法语的段落 |
| :第一个孩子 | 匹配元素的第一个子元素。 | p:first-child { color: red } 匹配元素的第一个子元素（如果它是段落）。 |
| ：最后一个孩子 | 匹配元素的最后一个子元素。 | `div p:last-child { color: blue }` 会匹配元素的最后一个子元素（如果它是段落）。 |
| :第一个类型 | 与元素中同类型的第一个兄弟元素匹配。 | li:first-of-type { color: red } 匹配元素内列表项的第一个实例 |
| :last-of-type | 与元素中同类型的最后一个兄弟元素匹配。 | li:last-of-type { color: blue } 匹配元素内列表项的最后一个实例 |
| :nth-child() | 匹配与其父元素序号相同的子元素。 | p:nth-child(3) { color: red } 匹配元素的第三个子元素（如果它是段落）。 |
| :nth-last-child() | 匹配与其父元素序号相反的子元素。 | p:nth-last-child(2) { color: blue } 匹配元素的倒数第二个子元素（如果它是段落）。 |
| :nth-of-type() | 匹配与其类型同级的序号元素。 | `li:nth-of-type(5) { color: red }` 匹配元素内列表项的第五个实例。 |
| :nth-last-of-type() | 匹配与其类型相反的序号同级元素。 | `li:nth-of-type(5) { color: red }` 匹配元素内列表项的倒数第二个实例。 |
| 独生子女 | 如果某个元素是其父元素的唯一子元素，则匹配该元素。 | article p:only-child { color: red } 匹配一个段落，如果它是 article 元素的唯一子元素。 |
| :仅限类型 | 如果某个元素是其类型中唯一的同级元素，则匹配该元素。 | article aside:only-of-type { color: blue } 匹配 article 元素中唯一的 aside 元素。 |
| ：空的 | 匹配没有子元素或内容的元素。 | td:empty { border-color: red } 匹配表格数据单元格中为空的情况。 |
| ：根 | 匹配文档的根元素。在 HTML 中，这将是 html 元素。 | :root { background: yellow } |
| 已启用 | 匹配未被禁用的表单控件元素。 | `input:enabled { border-color: lime }` 匹配未禁用的输入元素 |
| 已禁用 | 匹配已禁用的表单控件元素。 | `input:enabled { border-color: red }` 匹配已禁用的输入元素 |
| 已检查 | 匹配已选中的单选按钮或复选框类型的输入元素。 | input:checked { outline: 3px solid yellow } 匹配选中的输入元素 |
| ：不是（） | 协商伪类。匹配与选择器不匹配的元素。 | p:not(:first-child) { color: orange } 匹配非首子段落 |
伪元素选择器
| 选择器 | 描述 | 例子 |
|---|---|---|
| ::第一行 | 匹配元素中的第一行文本。 | p::first-line { font-weight: bold } 匹配段落中的第一行 |
| ::首字母 | 与元素中的首字母匹配。 | p::first-letter { font-size: 2em } 匹配段落中的首字母 |
| ：：前 | 与 content 属性一起使用，可在元素的初始内容之前生成内容。 | `h1::before { content: "*" }` 会在顶级标题的开头添加一个星号。 |
| ：：后 | 与 content 属性一起使用，用于在元素的初始内容之后生成内容。 | `h1::after { content: "+" }` 会在顶级标题末尾添加一个加号。 |
组合器选择器
| 选择器 | 描述 | 例子 |
|---|---|---|
| 选择器 选择器 | 后代组合器。匹配属于另一个元素的后代元素。 | 旁边 p { color: red } 匹配包含 class="warning" 的元素内的段落 |
| 选择器 > 选择器 | 子元素组合器。匹配作为另一个元素的子元素。 | .warning > p { color: red } 匹配包含 class="warning" 的元素的子段落 |
| 选择器 + 选择器 | 相邻兄弟组合器。匹配紧随另一个元素之后的元素。 | h1 + * { color: red } 匹配顶级标题后的第一个元素 |
| 选择器 ~ 选择器 | 通用兄弟组合器。匹配位于另一个元素之后的元素。 | h2 ~ p { color: red } 匹配所有位于二级标题之后的段落 |
CSS 分组选择器
CSS中的分组选择器会选择所有具有相同样式定义的HTML元素。
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
为了简化代码，只需应用 CSS 选择器分组即可。只需用逗号分隔每个选择器即可。让我们看看应用 CSS 选择器分组后的代码：
h1, h2, p {
text-align: center;
color: red;
}