多条件选择器需连写无空格，如.btn.primary.large表示元素必须同时具备三个类；input.required[data-validate="email"]要求同元素满足标签、类、属性三条件；伪类如:disabled:hover也支持连写表示“与”逻辑。
多个类名同时存在怎么写
当一个元素同时拥有 class="btn primary large" 三个类，而你只想匹配「既有 primary 又有 large」的按钮时，不能用空格（那是后代选择器），必须把类名连写、不加空格：
.btn.primary.large { /* 匹配同时含这三个类的元素 */ }这是「并集条件」：元素必须一次性具备所有指定类。漏掉任意一个，样式就不生效。
- 常见错误是写成
.btn .primary .large（带空格）——这会匹配.btn内部的.primary内部的.large，完全不是同一个元素 - 顺序无关：只要元素同时有这三个类，
.primary.btn.large也有效 - 如果类名是动态拼接的（比如 Vue 的
:class或 React 的className），要确保渲染后 DOM 确实包含全部目标类名，否则选择器失效
标签 + 类 + 属性三者同时满足怎么写
想只给「<input> 元素中，带 class="required" 且含有 data-validate="email" 属性的」加红框，就直接串起来：
input.required[data-validate="email"] { border: 1px solid red; }这里没有空格，表示同一个元素必须同时满足三个条件：是 input 标签、有 required 类、有对应值的 data-validate 属性。
立即学习“前端免费学习笔记（深入）”；
- 属性值带引号更安全，尤其含特殊字符时；纯字母数字可省略，但建议统一加双引号
- 属性选择器支持部分匹配，比如
[type^="text"]匹配type以text开头的元素，但注意这不是「多条件」，而是单条件的模糊匹配 - 不要混用空格和连写：例如
input .required是后代选择器，和input.required完全不同
:hover 和 :disabled 这类伪类能一起用吗
可以，而且很常用。比如让「禁用状态下的按钮在悬停时」显示灰色文字：
button:disabled:hover { color: #999; }这个选择器要求元素同时处于 :disabled 和 :hover 两种伪类状态。浏览器会按实际交互实时判断是否满足。
- 伪类之间连写，等价于「与」逻辑；用逗号分隔才是「或」逻辑（
:hover, :focus） - 注意伪类顺序不影响匹配，但影响可读性，习惯上把结构类（如
:nth-child）放前，状态类（如:hover、:disabled）放后 -
:disabled对<button></button>、<input>有效，但对<div> 无效——它只作用于原生可禁用元素<h3>为什么写了多条件却没生效</h3> <p>最常被忽略的是「选择器优先级」和「DOM 实际结构」两个硬约束。</p> <ul> <li>即使语法完全正确，如果另一条更高优先级的规则（比如 <code>#form .btn）已设置了相同属性，你的多条件选择器（如.btn.primary）也会被覆盖 - 检查真实 HTML：用浏览器开发者工具看目标元素是否真的同时具备所有条件。比如你以为它有
active类，其实 JS 没触发、或者类名拼错了 - 属性选择器对大小写敏感：
[role="button"]不匹配role="Button"；HTML 中属性值默认不区分大小写，但 CSS 选择器严格区分 - 不要依赖「看起来像」：用
getComputedStyle()或 DevTools 的 Computed 面板确认样式是否真正应用，而不是只看 Elements 面板里有没有该规则
