EnlightenCode

CSS选择器全面指南 🎯 ​

选择器权重（Specificity）💪 ​

权重计算规则 ​

选择器权重使用 (x,y,z) 三元组表示：

  • x：ID选择器（#id）的数量
  • y：类选择器（.class）、属性选择器（[attr]）、伪类（:hover）的数量
  • z：元素选择器（div）、伪元素选择器（::before）的数量

💡 重要提示：从左到右依次比较，数值大的优先级更高

权重示例 ​

css
/* 以下是从低到高排序的选择器权重示例 */
div                                    /* (0,0,1) */
.container                            /* (0,1,0) */
.container ul a:hover                 /* (0,2,2) */
.container .form input[type='text']   /* (0,3,1) */
#list                                /* (1,0,0) */
.container #list::before             /* (1,1,1) */
.container #list a::before           /* (1,1,2) */

特殊情况说明 ⚠️ ​

  1. !important 声明会覆盖任何其他声明
  2. 内联样式（style属性）的权重为 (1,0,0,0)
  3. 通配符选择器 (*) 和组合器 (+, >, ~, ' ') 不影响权重

选择器匹配模式 🔍 ​

1. 后代选择器 E F ​

选择E元素内部所有的F元素（包括孙子元素）

css
.container p { /* 选择.container内所有p元素 */ }

2. 子选择器 E > F ​

只选择E元素的直接子元素F

css
.nav > li { /* 只选择.nav的直接子元素li */ }

3. 相邻兄弟选择器 E + F ​

选择E元素后面紧邻的同级F元素

css
h2 + p { /* 选择紧跟在h2后面的p元素 */ }

4. 通用兄弟选择器 E ~ F ​

选择E元素后面所有同级的F元素

css
h2 ~ p { /* 选择h2后面所有的同级p元素 */ }

实用技巧与最佳实践 💡 ​

  1. 避免过度嵌套

    • 选择器嵌套不要超过3层
    • 过深的嵌套会降低性能并增加维护难度

  2. CSS选择器性能优化

    • ID选择器 > 类选择器 > 标签选择器
    • 避免使用通配符选择器作为开头

  3. 常见陷阱

    • 权重相同时，后面的样式会覆盖前面的
    • 组合选择器的权重是所有选择器权重的总和

现代CSS选择器补充 🚀 ​

属性选择器 ​

css
[data-type="primary"] { /* 选择特定属性值的元素 */ }
[class*="btn-"] { /* 选择class包含"btn-"的元素 */ }

伪类选择器 ​

css
:is(.header, .footer) p { /* 选择.header和.footer中的p元素 */ }
:where(section, article) h2 { /* 类似:is但权重为0 */ }
:has(> img) { /* 选择包含img子元素的元素（新特性） */ }

🌟 提示：现代浏览器支持更多强大的选择器，建议查看 MDN 获取最新特性