为什么bootstrap只接受一个高度特定的CSS类的表单样式？

Question

我有一个带有输入表的jsbin，使用bootstrap。令我困惑的是带有

的风格

input.someClass {
    background-color: blue;
}

按预期应用

，但

.anotherClass {
    background-color: green;
}

不适用于我的输入元素。这是什么原因？如需参考，请查看http://jsbin.com/enaris/3/edit

Answer 1

  

这个原因是什么？

这只是specificity的问题 - 第一个选择器有type selector附加到类名，而第二个选择器只有一个类。因此，第二个选择器更具体，优先。

这是从我的另一个answer迁移出来的，这可能有所帮助：

您可以将特异性视为四个数字，从（0,0,0,0）开始：

• ！重要规则始终优先，只有另一个！重要规则 可以覆盖前一个（它是CSS的辅助功能， 旨在覆盖UA样式表）
• 通用选择器（*）的特异性为0
• +和~等组合词也没有特异性
• 内联样式具有最高的特异性（除了！important） 并算作第一个数字（1,0,0,0）
• ID（#test）计数为上述集合中的第二个数字（0,1,0,0）
• 类，伪类和属性选择器是第三个数字 （0,0,1,0）
• 类型选择器和伪元素（例如 - <p>＆amp; ::after）取代 第四个数字，并且是最不具体的
• 请记住，如果两个规则具有相同的特异性并指定 同一属性后者在样式表中将获胜

基于以上所述，第一个选择器具有（0,0,1,1）的特定，而第二选择器具有（0,0,1,0）

Answer 2

CSS规则从最不具体到最具体的应用。

你有：

Least Specific    More Specific                  Most specific
.anotherClass     input[type=...] (bootstrap)    input.someClass

因此，在您的示例中，b-cell比引导样式更具体，a-cell更少。

您可以强制a-cell优先使用!important（但谨慎使用!important，因为它可能会变成调试地狱）：

.a-cell {
  background-color: green !important;