CSS 选择器参考手册
CSS 选择器
CSS 选择器用于“查找”（或选择）您想要设置样式的 HTML 元素。
使用我们的 CSS 选择器测试器来演示不同的选择器。
CSS 简单选择器
简单选择器根据元素名称、id 和类选择元素。此外，还有通用选择器（*）。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| element | p | 选择所有 <p> 元素。 |
| #id | #firstname | 选择 id="firstname" 的元素。 |
| * | * | 选择所有元素。 |
| .class | .intro | 选择 class="intro" 的所有元素。 |
CSS 属性选择器
属性选择器选择具有给定属性集的 HTML 元素。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
| [attribute*=value] | a[href*="w3school"] | 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。 |
CSS 嵌套选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| & | & | 在另一个元素的上下文中为元素应用样式 |