🎓 作者简介： 前端领域优质创作者
🚪 资源导航： 传送门=>
🎬 个人主页： 江城开朗的豌豆
🌐 个人网站: 江城开朗的豌豆 🌍
📧 个人邮箱: YANG_TAO_WEB@163.com 📩
💬 个人微信: y_t_t_t_ 📱
📌 座 右 铭: 生活就像心电图，一帆风顺就证明你挂了。 💔
👥 QQ群: 906392632 (前端技术交流群) 💬
一、CSS选择器类型全解析
1. 基础选择器
/* 标签选择器 */
p { color: #333; }
/* 类选择器 */
.btn { padding: 8px 16px; }
/* ID选择器 */
#header { height: 60px; }
/* 通配选择器 */
* { box-sizing: border-box; }
2. 属性选择器
/* 存在属性 */
[disabled] { opacity: 0.6; }
/* 精确匹配 */
[type="submit"] { background: #1890ff; }
/* 模糊匹配 */
[class*="icon-"] { background-size: contain; }
3. 组合选择器
/* 后代选择器 */
.nav li { display: inline-block; }
/* 直接子元素 */
.menu > li { border-bottom: 1px solid #eee; }
/* 相邻兄弟 */
h2 + p { margin-top: 8px; }
/* 通用兄弟 */
h3 ~ p { color: #666; }
4. 伪类选择器
/* 交互状态 */
a:hover { text-decoration: underline; }
/* 结构位置 */
li:nth-child(2n) { background: #f7f7f7; }
/* 表单状态 */
input:focus { border-color: #1890ff; }
5. 伪元素选择器
/* 首行文字 */
p::first-line { font-weight: bold; }
/* 占位内容 */
input::placeholder { color: #999; }
/* 自定义内容 */
.tooltip::after { content: "提示信息"; }
二、CSS可继承属性大全
1. 文本相关属性
font-family, font-size, font-weight
line-height, color, text-align
text-indent, letter-spacing
word-spacing, text-transform
2. 列表相关属性
list-style-type, list-style-position
list-style-image
3. 其他可继承属性
visibility, cursor, direction
4. 不可继承的常见属性
background, border, margin
padding, width, height
position, display, float
三、CSS优先级计算法则
1. 权重等级划分
| 选择器类型 | 权重值 |
|---|---|
| !important | ∞ |
| 内联样式 | 1000 |
| ID选择器 | 0100 |
| 类/属性/伪类 | 0010 |
| 元素/伪元素 | 0001 |
2. 计算示例
/* 权重：0-1-1 */
.nav li { color: blue; }
/* 权重：0-1-0 */
.active { color: red !important; }
/* 权重：1-0-0 */
#header { color: green; }
3. 优先级规则
- !important > 内联 > ID > 类 > 元素
- 相同权重时，后定义的样式生效
- 继承的样式优先级最低
4. 实战技巧
/* 避免过度使用ID选择器 */
/* 不推荐 */
#header .nav #current { color: red; }
/* 推荐 */
.nav-current { color: red; }
/* 谨慎使用!important */
/* 不推荐 */
.error { color: red !important; }
/* 推荐 */
.form-control.error { color: red; }
四、常见问题解决方案
1. 样式不生效怎么办？
- 检查选择器是否正确命中元素
- 查看是否有更高优先级的样式覆盖
- 使用开发者工具检查计算后的样式
2. 如何优雅覆盖第三方组件样式？
/* 通过增加特异性而不是用!important */
.my-theme .ant-btn { color: #fff; }
3. 提高代码可维护性
- 保持选择器简洁（不超过3级）
- 使用有意义的类名
- 建立合理的样式组织结构
结语
掌握CSS选择器和优先级是前端开发的基本功。在实际项目中，建议：
- 多用类选择器，少用ID选择器
- 避免滥用!important
- 合理组织CSS代码结构
- 善用开发者工具调试样式
希望这篇指南能帮助你更好地理解和运用CSS选择器！
