CSS 类选择器组合

发布时间:2026/7/21 5:35:47
CSS 类选择器组合 CSS 类选择器组合.row.between.row.between是多类选择器Compound Selector表示同时拥有row和between两个类的元素。语法含义.row.between{justify-content:space-between;}等价于“选中那些class属性里同时包含row和between的元素”。!-- 匹配 ✓ --divclassrow between…/div!-- 不匹配 ✗缺少 between --divclassrow…/div!-- 不匹配 ✗缺少 row --divclassbetween…/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.rowdiv.row{…}/* 必须是 div 且 class 含 row */实际应用示例选择器含义典型用途.row.between同时有两个类灵活组件的变体如左对齐/两端对齐.btn.btn-primary必须有 btn 和 btn-primary防止单独.btn-primary被覆盖ul.list liul 的直接子 li嵌套列表只控制第一层.header, .footer多个独立元素统一样式如都有边框input[typetext]属性选择器限定某类型输入框