CSS 类选择器组合

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 */

实际应用示例