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 嵌套选择器

选择器	例子	例子描述
`&`	`&`	在另一个元素的上下文中为元素应用样式