通过ID设置元素的样式，按类不起作用

Question

我正在使用twitter bootstrap表，并尝试将自己的样式（背景颜色）分配给表的元素。

什么有效：为每个＆lt; td＆gt;分配id="foo"元素，然后将#foo { ... }放在我的样式表中。

什么行不通：为每个＆lt; td＆gt;分配class="foo"元素，然后将.foo { ... }放在我的样式表中。我还通过在样式表中放置td { ... }和tr td { ... }来尝试样式化。两者都没有。

为什么会这样？我想也许可能有一个同名的类，但除非bootstrap有一个名为“.asdfasdfasdfasdf”的类，我很确定不是这样。

Answer 1

没有看到任何实际的代码，很难说，但我猜你有一个CSS规则具有更高的特异性，它会覆盖你的类。要跟踪这样的内容，请在浏览器中使用“ inspect ”来查看哪个规则覆盖了您的CSS类。

CSS优先级确实有效，并按如下顺序排序：

• 元素，伪元素： 0,0,0,1
• Class，Pseudo class，Attribute： 0,0,1,0
• Id： 0,1,0,0
• 内联样式： 1,0,0,0

例如：如果您有#body table tr td {}之类的规则，则优先级始终高于tr td {}，而不是body table tr td {}或tr td.someClass {}。

您可以在此页面上详细了解特异性：Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade。

Answer 2

尝试将班级中的css值标记为重要。

.foo { 
     border: 1px solid black !important; 
}