正在加载...
CSS 选择器完整参考
本指南旨在提供最全面的 CSS 选择器参考，帮助开发者快速查找和应用各种选择器。无论是基础选择器、组合选择器、属性选择器，还是伪类与伪元素，本指南均提供完整覆盖，并辅以实际示例以便在真实项目中直接使用。通过按类别整理，开发者可以高效定位所需选择器，理解其用途、语法及浏览器支持情况。无论是表单样式、响应式设计，还是现代逻辑选择器与影子 DOM 样式，这份参考手册都是 CSS 开发过程中不可或缺的工具。
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | 通用选择器 - 选中所有元素 | * { margin: 0; } | 所有浏览器 |
| element | tagname | 类型选择器 - 选中指定类型的所有元素 | p { color: blue; } | 所有浏览器 |
| .class | .classname | 类选择器 - 选中指定类名的元素 | .highlight { background: yellow; } | 所有浏览器 |
| \#id | #idname | ID选择器 - 选中指定 ID 的元素 | #header { width: 100%; } | 所有浏览器 |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | 后代选择器 - 选中 A 内的所有 B 元素 | div p { margin: 10px; } | 所有浏览器 |
| child | A > B | 子元素选择器 - 选中 A 的直接子元素 B | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | 相邻兄弟选择器 - 选中紧随 A 之后的 B | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | 通用兄弟选择器 - 选中 A 之后的所有同级 B | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | 选中具有指定属性的元素 | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | 选中属性值等于指定值的元素 | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | 选中属性值包含指定单词的元素 | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | 选中属性值以指定值开头的元素 | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | 选中属性值以指定值结尾的元素 | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | 选中属性值包含指定值的元素 | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | 属性值大小写不敏感匹配 | \[type="EMAIL" i] { text-transform: lowercase; } | 现代浏览器 |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | 选中第一个子元素 | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | 选中最后一个子元素 | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | 选中第 n 个子元素 | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | 从后选中第 n 个子元素 | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | 选中同类型的第 n 个元素 | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | 从后选中同类型的第 n 个元素 | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | 选中同类型的第一个元素 | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | 选中同类型的最后一个元素 | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | 选中唯一子元素 | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | 选中唯一类型元素 | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | 选中没有子元素的元素 | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | 鼠标悬停时选中元素 | a:hover { color: red; } | 所有浏览器 |
| :active | :active | 元素激活或点击时选中 | button:active { transform: scale(0.95); } | 所有浏览器 |
| :focus | :focus | 元素获得键盘焦点时选中 | input:focus { outline: 2px solid blue; } | 所有浏览器 |
| :focus-visible | :focus-visible | 可视焦点时选中 | button:focus-visible { outline: 2px solid; } | 现代浏览器 |
| :focus-within | :focus-within | 包含焦点元素时选中 | form:focus-within { border: 1px solid blue; } | 现代浏览器 |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | 选中可用表单元素 | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | 选中禁用表单元素 | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | 选中已勾选的复选框/单选按钮 | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | 选中不确定状态的复选框 | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | 选中合法输入元素 | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | 选中不合法输入元素 | input:invalid { border-color: red; } | IE10+ |
| :required | :required | 选中必填元素 | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | 选中可选元素 | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | 选中只读元素 | input:read-only { background: #f9f9f9; } | 现代浏览器 |
| :read-write | :read-write | 选中可编辑元素 | input:read-write { background: white; } | 现代浏览器 |
| :placeholder-shown | :placeholder-shown | 显示占位符时选中 | input:placeholder-shown { font-style: italic; } | 现代浏览器 |
| :in-range | :in-range | 值在范围内的元素 | input:in-range { border-color: green; } | 现代浏览器 |
| :out-of-range | :out-of-range | 值超出范围的元素 | input:out-of-range { border-color: red; } | 现代浏览器 |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | 选中未访问链接 | a:link { color: blue; } | 所有浏览器 |
| :visited | :visited | 选中已访问链接 | a:visited { color: purple; } | 所有浏览器 |
| :any-link | :any-link | 选中所有链接 | a:any-link { text-decoration: underline; } | 现代浏览器 |
| :target | :target | 选中当前 URL 指向的目标元素 | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | 选中不匹配选择器的元素 | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | 选中匹配任意选择器的元素 | :is(h1, h2, h3) { margin-top: 0; } | 现代浏览器 |
| :where(selector) | :where(sel1, sel2) | 与 :is 相同但不增加特异性 | :where(h1, h2) { color: blue; } | 现代浏览器 |
| :has(selector) | :has(sel) | 选中包含指定选择器的元素 | div:has(img) { border: 1px solid; } | 现代浏览器 |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | 在元素前插入内容 | p::before { content: "→ "; } | IE9+（单冒号 IE8+） |
| ::after | ::after | 在元素后插入内容 | p::after { content: " ←"; } | IE9+（单冒号 IE8+） |
| ::first-line | ::first-line | 选中文本的首行 | p::first-line { font-weight: bold; } | IE9+（单冒号 IE6+） |
| ::first-letter | ::first-letter | 选中文本的首字母 | p::first-letter { font-size: 2em; } | IE9+（单冒号 IE6+） |
| ::selection | ::selection | 选中用户选择的文本 | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | 选中输入框占位符文本 | input::placeholder { color: #999; } | 现代浏览器 |
| ::backdrop | ::backdrop | 选中全屏元素的背景 | dialog::backdrop { background: rgba(0,0,0,0.5); } | 现代浏览器 |
| ::marker | ::marker | 选中列表标记 | li::marker { color: red; } | 现代浏览器 |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | 选中文档根元素 | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | 选中作用域元素 | :scope > p { margin: 0; } | 现代浏览器 |
| :defined | :defined | 选中已定义自定义元素 | custom-element:defined { opacity: 1; } | 现代浏览器 |
| :host | :host | 选中 Shadow DOM 宿主元素 | :host { display: block; } | 现代浏览器 |
| :host(selector) | :host(sel) | 选中匹配选择器的宿主元素 | :host(.active) { color: red; } | 现代浏览器 |
| :host-context(selector) | :host-context(sel) | 选中特定上下文的宿主元素 | :host-context(.dark) { color: white; } | 现代浏览器 |
| ::slotted(selector) | ::slotted(sel) | 选中插槽内容 | ::slotted(p) { margin: 0; } | 现代浏览器 |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | 基于媒体条件应用样式 | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | 浏览器支持特性时应用样式 | @supports (display: grid) { .layout { display: grid; } } | 现代浏览器 |
| @container | @container (condition) | 基于容器大小应用样式 | @container (min-width: 400px) { .card { flex-direction: row; } } | 现代浏览器 |
Quick Examples
css
CSS Code
/* Basic selectors combination */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Attribute selectors for forms */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-elements for enhanced styling */
.quote::before {
content: """;
font-size: 2em;
color: #999;
}
/* Advanced structural selectors */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Modern logical selectors */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}最佳实践与建议：
在 CSS 开发中，使用具体选择器可以避免样式冲突，优先使用类选择器而非 ID，以提升复用性。合理组合选择器能够减少 CSS 文件大小，提高渲染性能。测试伪类选择器在不同浏览器的兼容性，尤其是 :not()，因其可能影响性能。记住伪元素在 DOM 中是虚拟的，不占据实际节点位置。在使用复杂选择器组合时注意特异性。属性选择器可用于动态表单样式。对新型选择器如 :has()、:is() 进行浏览器支持测试。将相关选择器分组，提升代码组织性；谨慎使用后代选择器，避免过度嵌套。某些伪类仅适用于特定元素，需合理应用。
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
3
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部