CSS 选择器
CSS 选择器是用来选择 HTML 元素并为其应用样式的模式。
基本选择器
基本选择器根据元素名称、id 和类选择元素。此外，还有通用选择器（*）。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| element | p { color: green; } | 选择所有<p>元素。 |
| #id | #firstname { color: green; } | 选择id="firstname"的元素。 |
| * | * { color: green; } | 选择所有元素。 |
| .class | .intro { color: green; } | 选择class="intro"的所有元素。 |
组合选择器
组合选择器根据字符空格、>、+、~，实现 HTML 元素的选择。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| 后代选择器 (空格) | div p { color: red; } | 选择<div>元素的所有后代<p>元素。 |
| 子元素选择器 (>) | div > p { color: green; } | 选择<div>元素的直接子元素<p>元素。 |
| 相邻兄弟选择器 (+) | h1 + p { font-size: 1.2em; } | 选择紧接在<h1>元素后的第一个<p>元素。 |
| 通用兄弟选择器 (~) | h1 ~ p { color: purple; } | 选择所有在<h1>元素后的<p>元素。 |
| 选择器列表 (,) | div, p { color: purple; } | 选择所有<div>元素和所有<p>元素。 |
属性选择器
属性选择器根据特定的属性类型/属性值，实现 HTML 元素的选择。
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有target属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有target="_blank"属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择title属性包含单词 "flower" 的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其src属性值以"https"开头的每个<a>元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其src属性以 ".pdf" 结尾的所有<a>元素。 |
| [attribute*=value] | a[href*="kaicz"] | 选择其href属性值中包含 "kaicz" 子串的每个<a>元素。 |
伪类选择器
伪类选择器用于设置元素特定部分的样式。
| 伪类 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动链接 |
| :any-link | a:any-link | 选择所有带有href属性的<a>或<area>元素。 |
| :autofill | input:autofill | 选择所有由浏览器自动填充值的<input>>元素。 |
| :checked | option:checked | 匹配所有被选中的<input>或<option>元素。 |
| :default | input:default | 选择一组相关元素中的默认表单元素。 |
| :defined | :defined | 选择所有已定义的元素（标准或自定义元素）。 |
| :dir() | :dir(rtl) | 选择具有指定文本方向的元素。 |
| :disabled | option:disabled | 选择所有被禁用的元素，常用于表单元素。 |
| :empty | div:empty | 选择所有没有子元素（包括文本节点）的元素。 |
| :enabled | input:enabled | 选择所有启用的元素，常用于表单元素。 |
| :first | @page :first | 表示打印文档的第一页（与 @page 规则一起使用）。 |
| :first-child | p:first-child | 选择作为其父元素第一个子元素的元素（在一组兄弟元素中）。 |
| :first-of-type | li:first-of-type | 选择一组兄弟元素中第一个特定类型的元素。 |
| :focus | select:focus | 选择获得焦点的元素，常用于表单元素。 |
| :focus-visible | button:focus-visible | 选择获得焦点的元素（仅在通过键盘而非鼠标聚焦时应用焦点样式）。 |
| :focus-within | form:focus-within | 匹配元素或其任何后代获得焦点的元素。 |
| :fullscreen | :fullscreen | 选择当前处于全屏模式的元素。 |
| :has() | h2:has(+p) | 选择紧接在<p>元素后的<h2>元素，并将样式应用于<h2>。 |
| :hover | a:hover | 选择鼠标悬停的元素。 |
| :in-range | input:in-range | 选择值在指定范围内的<input>元素。 |
| :indeterminate | input:indeterminate | 选择处于不确定状态的表单元素。 |
| :invalid | input:invalid | 选择无效的表单元素。 |
| :is() | :is(ul, ol) | 选择所有<ul>和<ol>元素。 |
| :lang() | p:lang(it) | 选择lang属性为 "it"（意大利语）的<p>元素。 |
| :last-child | li:last-child | 选择作为其父元素最后一个子元素的<li>元素。 |
| :last-of-type | p:last-of-type | 选择作为其父元素最后一个<p>元素的<p>元素。 |
| :left | @page :left | 表示打印文档的所有左侧页面（与 @page 规则一起使用）。 |
| :link | a:link | 选择所有未访问的链接。 |
| :modal | :modal | 选择处于模态状态的元素。 |
| :not() | :not(p) | 选择所有不是<p>元素的元素。 |
| :nth-child() | p:nth-child(2) | 选择作为其父元素第二个子元素的<p>元素。 |
| :nth-last-child() | p:nth-last-child(2) | 选择作为其父元素倒数第二个子元素的<p>元素。 |
| :nth-last-of-type() | p:nth-last-of-type(2) | 选择作为其父元素倒数第二个<p>元素的<p>元素。 |
| :nth-of-type() | p:nth-of-type(2) | 选择作为其父元素第二个<p>元素的<p>元素。 |
| :only-child | p:only-child | 选择作为其父元素唯一子元素的<p>元素。 |
| :only-of-type | p:only-of-type | 选择作为其父元素唯一<p>元素的<p>>元素。 |
| :optional | textarea:optional | 选择没有required属性的<input>、<select>>或<textarea>元素。 |
| :out-of-range | input:out-of-range | 选择值超出指定范围的<input>元素。 |
| :placeholder-shown | input:placeholder-shown | 选择当前显示占位符文本的<input>或<textarea>元素。 |
| :popover-open | :popover-open | 选择处于显示弹出状态的元素。 |
| :read-only | input:read-only | 选择带有readonly属性的输入元素。 |
| :read-write | input:read-write | 选择可编辑的输入元素。 |
| :required | input:required | 选择带有required属性的输入元素。 |
| :right | @page :right | 表示打印文档的所有右侧页面（与 @page 规则一起使用）。 |
| :root | :root | 选择文档的根元素。 |
| :scope | :scope | 选择作为选择器匹配参考点或范围的元素。 |
| :state() | :state() | 选择具有指定自定义状态的自定义元素。 |
| :target | :target | 选择当前活动的目标元素。 |
| :user-invalid | :user-invalid | 选择具有无效值的表单元素（在用户与其交互后）。 |
| :user-valid | :user-valid | 选择具有有效值的表单元素（在用户与其交互后）。 |
| :valid | input:valid | 选择所有具有有效值的输入元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
| :where() | :where(ol, ul) | 选择所有<ul>和<ol>元素。 |
伪元素选择器
伪元素选择器根据定义元素的特殊状态，实现 HTML 元素的选择。
| 伪元素 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在指定元素的内容之后插入内容。 |
| ::backdrop | dialog::backdrop | 设置对话框或弹出元素背景视图的样式。 |
| ::before | p::before | 在指定元素的内容之前插入内容。 |
| ::file-selector-button | ::file-selector-button | 选择类型为<input type="file">的按钮。 |
| ::first-letter | p::first-letter | 选择每个<p>元素的第一个字母。 |
| ::first-line | p::first-line | 选择每个<p>元素的第一行。 |
| ::grammar-error | ::grammar-error | 设置浏览器标记为语法错误的文本样式。 |
| ::highlight() | ::highlight(custom-name) | 选择自定义高亮。 |
| ::marker | ::marker | 选择列表项的标记。 |
| ::placeholder | input::placeholder | 设置<input>或<textarea>元素的占位符文本的样式。 |
| ::selection | ::selection | 设置用户选中文本的样式。 |
| ::spelling-error | ::spelling-error | 设置浏览器标记为拼写错误的文本样式。 |
| ::view-transition | ::view-transition | 表示视图过渡叠加层的根，包含页面上的所有视图过渡。 |
| ::view-transition-group | ::view-transition-group | 表示单个视图过渡快照组。 |
| ::view-transition-image-pair | ::view-transition-image-pair | 表示视图过渡的“旧”和“新”视图状态的容器（过渡前后）。 |
| ::view-transition-new | ::view-transition-new | 表示视图过渡的“新”视图状态。 |
| ::view-transition-old | ::view-transition-old | 表示视图过渡的“旧”视图状态。 |
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
10
章节
32
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈