1

我有一个带有输入表的 jsbin，使用引导程序。让我困惑的是风格与

input.someClass {
    background-color: blue;
}

正如预期的那样被应用，但是

.anotherClass {
    background-color: green;
}

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

4

2 回答 2

5

这是什么原因？

这只是一个具体问题——第一个选择器有一个附加到类名的类型选择器，而第二个选择器只有一个类。因此，第二个选择器更具体并具有优先权。

这是从我的另一个答案迁移而来的，它可能会有所帮助：

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

  • !important 规则总是优先，只有另一个 !important 规则可以覆盖之前的规则（它是 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）

于 2013-07-30T15:59:46.493 回答
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;
于 2013-07-30T15:59:22.560 回答