CSS 类选择器组合

📅 2026/7/21 5:42:19 👁️ 阅读次数 📝 编程学习
CSS 类选择器组合

CSS 类选择器组合.row.between

.row.between多类选择器(Compound Selector),表示:同时拥有rowbetween两个类的元素。

语法含义

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

等价于:“选中那些class属性里同时包含rowbetween的元素”。

<!-- 匹配 ✓ --><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 > liul 的直接子 li嵌套列表只控制第一层
.header, .footer多个独立元素统一样式(如都有边框)
input[type="text"]属性选择器限定某类型输入框