当为 元素通过 CSS 类（如 .axios-form-multi-select）设置 height 时失效，根本原因在于内联样式（style="height: 76px"）具有更高 CSS 优先级，覆盖了外部样式表定义；需用 !important 强制覆盖或通过 JavaScript 动态移除/重写内联样式。
当为 `
在实际前端开发中，你常会遇到类似场景：一个由 Dojo Toolkit 渲染的多选下拉框（<select multiple></select>）带有内联 style="height: 76px"，而你无法修改原始源码，只能在页面 中注入自定义 CSS。此时，仅写：
.axios-form-multi-select {
height: 150px;
}
必然无效——因为内联样式（style 属性）的 CSS 特异性（specificity）为 1000，远高于任何类选择器（010）。浏览器渲染时，它会直接采纳 76px，而将你的 150px 规则标记为“已取消”（在 Chrome DevTools 的 Styles 面板中可见该行被划掉）。
✅ 正确且轻量的解决方式如下（按推荐顺序）：
1. 使用 !important 强制覆盖（适用于静态、可控场景）
<style>
.axios-form-multi-select {
height: 150px !important;
/* 可选：同步调整 padding/line-height 提升可读性 */
padding: 8px 12px;
}
</style>
⚠️ 注意：!important 是“紧急补丁”，不建议长期滥用，但在此类无法修改源码的运维场景中，它是最直接、零依赖的方案。
2. JavaScript 动态清除并重置（推荐用于需要精确控制或兼容性要求高时）
在页面加载后（如 DOMContentLoaded），用 JS 移除内联 height 并应用新值：
<script>
document.addEventListener('DOMContentLoaded', () => {
const selectEl = document.querySelector('.axios-form-multi-select');
if (selectEl) {
// 移除内联 height（保留其他内联样式如 width）
selectEl.style.removeProperty('height');
// 再通过 class 或 style 设置新高度
selectEl.style.height = '150px';
// 或添加 class：selectEl.classList.add('custom-select-height');
}
});
</script>
3. 进阶技巧：利用 DevTools 快速验证与调试
- 打开 Chrome DevTools（
Ctrl+Shift+I或右键 → “检查”）； - 在 Elements 面板中定位该
<select></select>元素； - 切换到 Styles 面板 → 查看
height属性是否被划掉，点击右侧箭头可跳转至定义位置； - 在 Computed 面板中搜索
height，确认标有resolved的值是否为你期望的150px； - 若未生效，右键该元素 → “Break on” → “Attribute modifications”，可捕获 JS 动态修改
style的时机，避免被后续脚本覆盖。
? 补充说明：
- 对于原生
<select multiple></select>，height确实仅控制可视区域高度（即滚动容器高度），不影响下拉弹层——这与单选select一致，属浏览器原生行为，无需额外干预； - 若项目允许引入轻量 UI 库（如 Choices.js 或 TomSelect），可考虑完全自定义渲染，获得 100% 样式控制权，但本例中因限制条件，上述 CSS/JS 方案更务实。
总结：内联样式的高优先级是问题核心，而非 select 本身“不支持 height”。掌握 CSS 特异性规则 + DevTools 的 Computed 面板验证能力，是快速破局的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
