CSS 类选择器组合
📅 2026/7/21 5:42:19
👁️ 阅读次数
📝 编程学习
CSS 类选择器组合.row.between
.row.between是多类选择器(Compound Selector),表示:同时拥有row和between两个类的元素。
语法含义
.row.between{justify-content:space-between;}等价于:“选中那些class属性里同时包含row和between的元素”。
<!-- 匹配 ✓ --><divclass="row between">…</div><!-- 不匹配 ✗(缺少 between) --><divclass="row">…</div><!-- 不匹配 ✗(缺少 row) --><divclass="between">…</div>中间无空格是关键。
.row.between≠.row .between
常见组合写法对比
1️⃣ 多类组合(本例).a.b
.row.between{…}/* 同时有 row 和 between */2️⃣ 后代选择器.a .b
.row .label{…}/* .row 内部所有 .label 元素(任意层级) */3️⃣ 子元素选择器.a > .b
.list > .item{…}/* .list 的**直接子元素**中的 .item */4️⃣ 相邻兄弟选择器.a + .b
.title + .subtitle{…}/* 紧跟在 .title 后的 .subtitle */5️⃣ 通用兄弟选择器.a ~ .b
.title ~ p{…}/* .title 之后所有同级 p 元素 */6️⃣ 或(用逗号分组).a, .b
.btn-primary, .btn-ghost{…}/* 任一选择器命中即应用 */7️⃣ 且(与标签组合)div.row
div.row{…}/* 必须是 div 且 class 含 row */实际应用示例
| 选择器 | 含义 | 典型用途 |
|---|---|---|
.row.between | 同时有两个类 | 灵活组件的变体(如左对齐/两端对齐) |
.btn.btn-primary | 必须有 btn 和 btn-primary | 防止单独.btn-primary被覆盖 |
ul.list > li | ul 的直接子 li | 嵌套列表只控制第一层 |
.header, .footer | 多个独立元素 | 统一样式(如都有边框) |
input[type="text"] | 属性选择器 | 限定某类型输入框 |
编程学习
技术分享
实战经验