CSS 类选择器组合

CSS 类选择器组合 .row.between

.row.between 是多类选择器 （Compound Selector），表示：同时 拥有 row 和 between 两个类的元素。

语法含义

.row.between {
  justify-content: space-between;
}

等价于："选中那些 class 属性里同时包含 row 和 between 的元素"。

<!-- 匹配 ✓ -->
<div class="row between">...</div>

<!-- 不匹配 ✗（缺少 between） -->
<div class="row">...</div>

<!-- 不匹配 ✗（缺少 row） -->
<div class="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"]	属性选择器	限定某类型输入框