核心内容摘要
爱站网挖掘工具
十年PHP架构师的成长之路，程序员必备
CSS选择器世界-基础部分核心笔记1.1 CSS选择器：重表现，轻逻辑 CSS选择器核心目标是精准定位HTML元素并定义样式，其设计逻辑以视觉表现为核心，而非功能逻辑。开发者需避免在CSS中实现复杂逻辑判断，应通过合理的HTML结构与类名设计简化选择器复杂度。1.2 选择器分类与语法 基础选择器 标签选择器：直接匹配HTML标签名（如 div）。 类选择器：通过 class 属性匹配（如 .container）。 组合选择符 后代选择符（空格）：匹配嵌套在任意层级的元素（如 ul li）。 父子选择符（>）：仅匹配直接子元素（如 ul > li）。 相邻兄弟选择符（+）：匹配紧邻的下一个兄弟元素（如 h1 + p）。 通用兄弟选择符（~）：匹配后续所有同级元素（如 h1 ~ p）。 列关系选择符（||）：匹配表格中特定列的单元格（如 col || td）。 伪类与伪元素 伪类：以单冒号 : 开头，表示元素状态或用户行为（如 :hover、:nth-child(2)）。 伪元素：以双冒号 :: 开头，定位元素的特定部分（如 ::before、::first-line）。1.2.2 作用域与命名空间作用域：CSS选择器默认全局生效，可通过Shadow DOM或CSS Modules实现局部作用域。命名空间：用于XML/SVG等文档，通过 @namespace 规则定义（如 @namespace svg "http://www.w3.org/2000/svg";），匹配时需指定命名空间前缀（如 svg|circle）。1.3 无效选择器与渐进增强无效选择器：浏览器无法识别的选择器会导致整个规则失效（如旧浏览器不支持 :is()）。渐进增强策略： 将高版本选择器与基础选择器分开编写（如先写 .btn，再写 .btn:hover）。 避免混合新旧语法，确保低版本浏览器能解析基础样式。2.1 选择器优先级规则 优先级按级别从低到高计算，高级别会覆盖低级别，相同级别后定义者生效：0级：通配符（*）、组合符（+、>、~、空格、||）、逻辑组合符（:not()、:is()、:where()）。1级：标签选择器（如 div）、类型伪类（如 :link）。2级：类选择器（.class）、属性选择器（[type="text"]）、状态伪类（:checked）。3级：ID选择器（#id）。4级：内联样式（style="..."）。5级：`!important（强制覆盖其他规则，包括JavaScript设置的样式）。 优先级技巧：级别间不可跨越（如100个类选择器无法覆盖1个ID选择器）。重复当前选择器可增加权重（如 .foo.foo.foo 权重高于 .foo.bar）。3.1 选择器大小写敏感场景不区分大小写： HTML标签名（如 DIV 和 div 等效）。 纯属性名（如 [class] 匹配 class 或 CLASS）。区分大小写： 属性值（如 [type="TEXT"] 不匹配 type="text"）。 类名和ID（如 .Container 不匹配 .container）。强制不区分大小写：通过 i 标志（如 [class~=container i] 匹配 Container、CONTAINER 等）。关键实践建议简化选择器结构：避免深层嵌套（如 div ul li a），优先使用类名。慎用 !important：仅在无法通过优先级覆盖时使用，否则维护成本极高。逻辑组合符优化：:is() 和 :where() 可简化重复选择器（如 :is(h1, h2, h3).title），但需注意优先级变化。属性选择器灵活应用： [attr^="val"]：属性值以 val 开头。 [attr$="val"]：属性值以 val 结尾。 [attr*="val"]：属性值包含 val。 通过理解选择器的分类、优先级和大小写规则，开发者可编写更高效、可维护的CSS代码，同时避免常见陷阱。
