CSS篇：前端开发者必须掌握的CSS核心知识：选择器与优先级详解

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

🚪 资源导航： 传送门=>

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

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

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

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

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

一、CSS选择器类型全解析

1. 基础选择器

css 复制代码

/* 标签选择器 */
p { color: #333; }

/* 类选择器 */
.btn { padding: 8px 16px; }

/* ID选择器 */
#header { height: 60px; }

/* 通配选择器 */
* { box-sizing: border-box; }

2. 属性选择器

css 复制代码

/* 存在属性 */
[disabled] { opacity: 0.6; }

/* 精确匹配 */
[type="submit"] { background: #1890ff; }

/* 模糊匹配 */
[class*="icon-"] { background-size: contain; }

3. 组合选择器

css 复制代码

/* 后代选择器 */
.nav li { display: inline-block; }

/* 直接子元素 */
.menu > li { border-bottom: 1px solid #eee; }

/* 相邻兄弟 */
h2 + p { margin-top: 8px; }

/* 通用兄弟 */
h3 ~ p { color: #666; }

4. 伪类选择器

css 复制代码

/* 交互状态 */
a:hover { text-decoration: underline; }

/* 结构位置 */
li:nth-child(2n) { background: #f7f7f7; }

/* 表单状态 */
input:focus { border-color: #1890ff; }

5. 伪元素选择器

css 复制代码

/* 首行文字 */
p::first-line { font-weight: bold; }

/* 占位内容 */
input::placeholder { color: #999; }

/* 自定义内容 */
.tooltip::after { content: "提示信息"; }

二、CSS可继承属性大全

1. 文本相关属性

css 复制代码

font-family, font-size, font-weight
line-height, color, text-align
text-indent, letter-spacing
word-spacing, text-transform

2. 列表相关属性

css 复制代码

list-style-type, list-style-position
list-style-image

3. 其他可继承属性

css 复制代码

visibility, cursor, direction

4. 不可继承的常见属性

css 复制代码

background, border, margin
padding, width, height
position, display, float

三、CSS优先级计算法则

1. 权重等级划分

选择器类型	权重值
!important	∞
内联样式	1000
ID选择器	0100
类/属性/伪类	0010
元素/伪元素	0001

2. 计算示例

css 复制代码

/* 权重：0-1-1 */
.nav li { color: blue; }

/* 权重：0-1-0 */
.active { color: red !important; }

/* 权重：1-0-0 */
#header { color: green; }

3. 优先级规则

!important > 内联 > ID > 类 > 元素
相同权重时，后定义的样式生效
继承的样式优先级最低

4. 实战技巧

css 复制代码

/* 避免过度使用ID选择器 */
/* 不推荐 */
#header .nav #current { color: red; }

/* 推荐 */
.nav-current { color: red; }

/* 谨慎使用!important */
/* 不推荐 */
.error { color: red !important; }

/* 推荐 */
.form-control.error { color: red; }

四、常见问题解决方案

1. 样式不生效怎么办？

检查选择器是否正确命中元素
查看是否有更高优先级的样式覆盖
使用开发者工具检查计算后的样式

2. 如何优雅覆盖第三方组件样式？

css 复制代码

/* 通过增加特异性而不是用!important */
.my-theme .ant-btn { color: #fff; }

3. 提高代码可维护性

保持选择器简洁（不超过3级）
使用有意义的类名
建立合理的样式组织结构

结语

掌握CSS选择器和优先级是前端开发的基本功。在实际项目中，建议：

多用类选择器，少用ID选择器
避免滥用!important
合理组织CSS代码结构
善用开发者工具调试样式

希望这篇指南能帮助你更好地理解和运用CSS选择器！