我们正在使用 bootstrap，我有一个页面，我在其中使用小按钮得到了相互冲突的结果。
我有一些看起来像这样的按钮:
<input type="button" class="btn btn-small" value="Save"... />
我有我的主窗体，然后是一些用于 jQuery 对话框的 div。在主窗体上，按钮显示为小，但在对话框中，按钮显示为常规大小，即使在所有情况下，我都使用 <input type="button"和 class="btn btn-small" .唯一的区别是包含它们的 div，所以我猜它与按钮上方某处应用的样式有关。
当我查看 Firebug 中的“计算”样式时，它显示 .btn正在应用，但是 .btn-small对于我检查过的每个属性都有一条线穿过它，这两个属性都已列出，这意味着它没有被使用。
小按钮的行高为 15px，而普通尺寸的行高为 20px。真正奇怪的是，即使小按钮的行高计算属性为 15px，当我展开它以查看它的来源时，它显示 .btn应用了 20 像素的值(见图)。
归根结底，我真的不确定是什么原因造成的。我假设它是围绕它的众多 div 之一的某种风格。我的主要问题显然是如何解决这个问题，但在更一般的层面上，什么会导致 .btn-small不使用样式？
最佳答案
HTML 元素可以通过在 class 属性中列出类来分配多个类，用空格分隔它们，但是如果在两个规则中都声明了相同的属性，则首先通过特异性解决冲突，然后根据顺序解决冲突的 CSS 声明。类属性中类的顺序无关紧要。 [转自 mozilla 常见的 css 问题]
您有两个类修改同一个属性，因此浏览器正确地只应用一个。
关于未使用 CSS 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17554513/