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

Question

我有一个带有输入表的jsbin,使用bootstrap.令我困惑的是那种风格

input.someClass {
    background-color: blue;
}

按预期应用,但是

.anotherClass {
    background-color: green;
}

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

Answer 1

这是什么原因？

这只是一个特殊问题 - 第一个选择器有一个附加到类名的类型选择器,而第二个选择器只有一个类.因此,第二选择器更具体并且优先.

这是从我的另一个答案迁移出来的,它可能会有所帮助:

您可以将特异性视为四个数字,从(0,0,0,0)开始:

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

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