CSS篇：CSS选择器详解与权重计算全指南

🎓 作者简介 ： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

前言

CSS选择器是前端开发的基石，合理使用选择器不仅能精确控制页面样式，还能提高代码的可维护性。本文将系统介绍CSS选择器的各种类型，并深入解析CSS权重计算规则，帮助开发者避免常见的样式冲突问题。

一、CSS选择器类型大全

1. 基础选择器

css 复制代码

/* 元素选择器 */
div { color: red; }

/* 类选择器 */
.class-name { color: blue; }

/* ID选择器 */
#element-id { color: green; }

/* 通配选择器 */
* { margin: 0; }

2. 属性选择器

css 复制代码

/* 存在属性 */
[target] { background: yellow; }

/* 精确匹配 */
[type="text"] { border: 1px solid #ccc; }

/* 包含指定值 */
[class~="logo"] { width: 100px; }

/* 前缀匹配 */
[href^="https"] { color: green; }

/* 后缀匹配 */
[src$=".jpg"] { border: 2px solid #999; }

/* 子串匹配 */
[alt*="logo"] { opacity: 0.8; }

3. 组合选择器

css 复制代码

/* 后代选择器 */
div p { line-height: 1.5; }

/* 子元素选择器 */
ul > li { list-style: none; }

/* 相邻兄弟选择器 */
h1 + p { font-size: 1.2em; }

/* 通用兄弟选择器 */
h2 ~ p { color: #666; }

4. 伪类选择器

css 复制代码

/* 动态伪类 */
a:hover { color: red; }
input:focus { outline: none; }

/* 结构伪类 */
li:first-child { font-weight: bold; }
tr:nth-child(odd) { background: #f5f5f5; }

/* 表单伪类 */
input:disabled { opacity: 0.5; }
input:checked + label { color: green; }

5. 伪元素选择器

css 复制代码

p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
div::before { content: "前缀"; }
div::after { content: "后缀"; }

二、CSS选择器权重计算规则

1. 权重等级划分

CSS选择器的权重可以分为四个等级：

内联样式：1000（在元素style属性中直接写的样式）
ID选择器：0100
类/属性/伪类选择器：0010
元素/伪元素选择器：0001

2. 权重计算示例

css 复制代码

#header .nav li.active a:hover { 
  /* 权重：0,1,2,2 */
  /* 计算：ID(#header)=1, 类(.nav .active)=2, 元素(li a)=2 */
  color: red; 
}

div#main .content p:first-child {
  /* 权重：0,1,1,2 */
  color: blue;
}

3. 特殊规则

!important：优先级最高，但应尽量避免使用
css 复制代码
```
p { color: red !important; }
```
相同权重：后定义的样式会覆盖前面的样式
css 复制代码
```
p { color: red; }
p { color: blue; } /* 最终生效 */
```
继承的样式：权重最低，不如任何直接指定的样式

4. 权重计算练习

计算以下选择器的权重值：

css 复制代码

body div#container ul li a.special
/* 答案：0,1,1,4 */

css 复制代码

.form-control.input-large[type="text"]:focus
/* 答案：0,0,3,1 */

三、选择器使用最佳实践

避免过度嵌套：一般不超过3层

css 复制代码

/* 不推荐 */
body div#container ul li a {}

/* 推荐 */
.nav-link {}

合理使用ID选择器：ID选择器权重过高，不利于覆盖
优先使用类选择器：可复用性强，权重适中
谨慎使用!important：会导致样式难以维护
利用CSS预处理器：Sass/Less的嵌套功能需合理使用

四、常见问题解答

Q：为什么我的样式没有生效？

A：通常是因为选择器权重不够或被更高权重的样式覆盖，可以通过浏览器开发者工具检查。

Q：如何优雅地覆盖第三方组件样式？

A：可以通过增加选择器特异性（如添加父类）而不是使用!important。

Q：伪类和伪元素的权重相同吗？

A：不同，伪类(:)权重与类相同(0010)，伪元素(::)权重与元素相同(0001)。

结语

掌握CSS选择器及其权重计算是前端开发的基本功。合理使用选择器不仅能提高开发效率，还能使CSS代码更易于维护。建议开发者多使用类选择器，保持选择器的简洁性，避免过度依赖高权重选择器。