~ 真的奇妙之旅 ~

主题切换

CSS 选择器完整指南 ​

📋 选择器分类概览 ​

CSS 选择器是 CSS 的核心组成部分，用于选择需要样式化的 HTML 元素。本指南将选择器分为以下几类：

  • 🔍 基础选择器 - 最常用的选择器类型
  • 🔗 组合选择器 - 组合多个选择器进行更精确的选择
  • 🎯 伪类选择器 - 基于元素状态的动态选择
  • ✏️ 伪元素选择器 - 选择元素的特定部分
  • 🎪 属性选择器 - 基于属性值的选择

🔍 基础选择器 ​

1. 通用选择器 ​

选择器语法功能描述示例
通用选择器*选择所有元素* { margin: 0; padding: 0; }

2. 元素选择器 ​

选择器语法功能描述示例
元素选择器元素名选择指定类型的元素div { color: red; }

3. 类选择器 ​

选择器语法功能描述示例
类选择器.类名选择具有指定类的元素.button { background: blue; }

4. ID 选择器 ​

选择器语法功能描述示例
ID 选择器#id名选择具有指定 ID 的元素#header { height: 60px; }

🔗 组合选择器 ​

1. 后代选择器 ​

选择器语法功能描述示例
后代选择器A B选择 A 元素内的所有 B 元素div p { color: blue; }

2. 子元素选择器 ​

选择器语法功能描述示例
子元素选择器A > B选择 A 元素的直接子元素 Bul > li { list-style: none; }

3. 相邻兄弟选择器 ​

选择器语法功能描述示例
相邻兄弟选择器A + B选择紧接在 A 元素后的 B 元素（只修改B样式）h1 + p { margin-top: 0; }

4. 通用兄弟选择器 ​

选择器语法功能描述示例
通用兄弟选择器A ~ B选择 A 元素之后的所有 B 元素h1 ~ p { color: gray; }

🎯 伪类选择器 ​

1. 链接状态伪类 ​

选择器语法功能描述示例
:link:link选择未访问的链接a:link { color: blue; }
:visited:visited选择已访问的链接a:visited { color: purple; }
:hover:hover鼠标悬停时的元素button:hover { background: darkblue; }
:active:active元素被激活时（如点击）button:active { transform: scale(0.95); }
:focus:focus元素获得焦点时input:focus { border-color: blue; }

2. 表单状态伪类 ​

选择器语法功能描述示例
:checked:checked选择被选中的表单元素input:checked { background: green; }
:disabled:disabled选择被禁用的表单元素input:disabled { opacity: 0.5; }
:enabled:enabled选择可用的表单元素input:enabled { border: 1px solid; }
:required:required选择必填的表单元素input:required { border-color: red; }
:optional:optional选择可选的表单元素input:optional { border-color: gray; }
:valid:valid选择验证通过的表单元素input:valid { border-color: green; }
:invalid:invalid选择验证失败的表单元素input:invalid { border-color: red; }
:placeholder-shown:placeholder-shown占位符可见时的输入框input:placeholder-shown { color: gray; }

3. 结构伪类 ​

选择器语法功能描述示例
:first-child:first-child父元素的第一个子元素li:first-child { font-weight: bold; }
:last-child:last-child父元素的最后一个子元素li:last-child { border-bottom: none; }
:nth-child(n):nth-child(n)父元素的第 n 个子元素li:nth-child(2n) { background: #f5f5f5; }
:nth-last-child(n):nth-last-child(n)父元素的倒数第 n 个子元素li:nth-last-child(2) { color: red; }
:first-of-type:first-of-type父元素中同类型的第一个元素p:first-of-type { text-indent: 2em; }
:last-of-type:last-of-type父元素中同类型的最后一个元素p:last-of-type { margin-bottom: 0; }
:nth-of-type(n):nth-of-type(n)父元素中同类型的第 n 个元素p:nth-of-type(odd) { background: #f9f9f9; }
:nth-last-of-type(n):nth-last-of-type(n)父元素中同类型的倒数第 n 个元素p:nth-last-of-type(2) { font-style: italic; }
:only-child:only-child父元素的唯一子元素div:only-child { width: 100%; }
:only-of-type:only-of-type父元素中同类型的唯一元素img:only-of-type { display: block; }
:empty:empty没有子元素的元素div:empty { display: none; }

4. 其他伪类 ​

选择器语法功能描述示例
:root:root文档的根元素（通常是 <html>）:root { --main-color: #333; }
:not(selector):not(selector)不匹配指定选择器的元素div:not(.special) { opacity: 0.8; }
:target:targetURL 片段标识符指向的元素section:target { background: yellow; }
:focus-within:focus-within元素或其子元素获得焦点时form:focus-within { border-color: blue; }
:lang(language):lang(language)指定语言的元素p:lang(en) { font-family: Arial; }

✏️ 伪元素选择器 ​

选择器语法功能描述示例
::before::before在元素内容前插入内容p::before { content: "→ "; }
::after::after在元素内容后插入内容p::after { content: " ←"; }
::first-letter::first-letter选择元素的第一个字母p::first-letter { font-size: 2em; }
::first-line::first-line选择元素的第一行文本p::first-line { font-weight: bold; }
::selection::selection用户选中的文本部分::selection { background: yellow; }
::placeholder::placeholder输入框的占位符文本input::placeholder { color: #999; }

🎪 属性选择器 ​

选择器语法功能描述示例
[attr][属性名]选择具有指定属性的元素[title] { border-bottom: 1px dotted; }
[attr=value][属性名=值]选择属性值等于指定值的元素[type="submit"] { background: blue; }
[attr~=value][属性名~=值]选择属性值包含指定单词的元素[class~="button"] { padding: 10px; }
[attr|=value][属性名|=值]选择属性值以指定值开头的元素[lang|="en"] { font-family: Arial; }
[attr^=value][属性名^=值]选择属性值以指定值开头的元素[href^="https"] { color: green; }
[attr$=value][属性名$=值]选择属性值以指定值结尾的元素[src$=".jpg"] { border: 1px solid; }
[attr*=value][属性名*=值]选择属性值包含指定值的元素[class*="icon"] { background: url(icon.png); }

🎨 选择器优先级规则 ​

优先级计算规则 ​

优先级由四个部分组成，从左到右比较：

  1. 内联样式 - style 属性（优先级最高）
  2. ID 选择器 - #id
  3. 类/属性/伪类选择器 - .class, [attr], :hover
  4. 元素/伪元素选择器 - div, ::before

优先级示例 ​

css
/* 优先级：0,0,0,1 */
div { color: red; }

/* 优先级：0,0,1,0 */
.container { color: blue; }

/* 优先级：0,1,0,0 */
#header { color: green; }

/* 优先级：1,0,0,0 */
<div style="color: purple;">内联样式</div>

重要规则 ​

  • !important 声明具有最高优先级
  • 相同优先级时，后定义的样式覆盖先定义的
  • 继承的样式优先级最低

💡 实用技巧与最佳实践 ​

1. 选择器性能优化 ​

css
/* 避免使用通用选择器 */
* { margin: 0; } /* 性能差 */

/* 使用更具体的选择器 */
.container * { margin: 0; } /* 性能更好 */

/* 避免深层嵌套 */
div ul li a { color: blue; } /* 性能差 */
.nav-link { color: blue; } /* 性能好 */

2. 常用选择器模式 ​

css
/* 奇数/偶数行 */
tr:nth-child(odd) { background: #f9f9f9; }
tr:nth-child(even) { background: white; }

/* 前三个元素 */
li:nth-child(-n+3) { font-weight: bold; }

/* 最后三个元素 */
li:nth-last-child(-n+3) { color: red; }

/* 排除特定元素 */
div:not(.hidden) { display: block; }

3. 响应式设计选择器 ​

css
/* 移动端优化 */
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }
}

/* 高分辨率屏幕 */
@media (min-resolution: 2dppx) {
    img { image-rendering: -webkit-optimize-contrast; }
}

📚 浏览器兼容性参考 ​

CSS3 选择器兼容性 ​

  • 现代浏览器：Chrome、Firefox、Safari、Edge（几乎全支持）
  • IE 浏览器：IE9+ 支持大部分选择器，IE8 支持有限
  • 移动端：iOS Safari、Android Browser 支持良好

兼容性注意事项 ​

  • :focus-within：IE 不支持
  • ::placeholder：需要浏览器前缀
  • 属性选择器：IE7+ 基本支持

🔧 实用工具函数 ​

1. 常用选择器组合 ​

css
/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 隐藏元素但保持可访问性 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 禁用状态样式 */
button:disabled,
input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

最后更新：2024年
本指南适用于 CSS 初学者和中级开发者

提示：在实际开发中，建议使用 CSS 预处理器（如 Sass、Less）来简化选择器的使用和管理。

这是我的个人文档

Copyright © 2023-present ab15173636319