🎓 作者简介 : 前端领域优质创作者
🚪 资源导航: 传送门=>
🎬 个人主页: 江城开朗的豌豆
🌐 个人网站: 江城开朗的豌豆 🌍
📧 个人邮箱: YANG_TAO_WEB@163.com 📩
💬 个人微信: 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选择器!