Question

我在一个网站上工作，该网站有一个全局样式表（严重的是，IMO）在元素类型上设置样式。我正在为各种页面构建一些ASP.NET用户控件，并且我一直在遇到我的内部和内联样式被全局样式表中的样式覆盖的问题。我正在使用Firefox。例如，我刚添加了一个带有表格的控件。在开发时，我在用户控件内部声明了样式（因此它不在页头中）。外部global.css样式表已声明：

div#copy table {
  width: auto;
}

我的内部声明有：

table.MMPointBalance {
  border: 0 none;
  border-collapse: collapse;
  display: inline-block;
  width: 200px;
}

宽度：200px被外部样式表覆盖为auto。 ~~在其他类似的情况下，我一直在使用一些非常通用的global.css样式来覆盖Telerik控件的内联声明。~~（false statement）。内部和内联应该优先考虑。我认为上面的内联样式的选择器也比全局更具体。为什么不适用？

Answer 1

使用div #copy的规则优先，因为使用ID会使整体规则更具体。您可以更改其中一个规则，也可以使用！important

在其他类似的情况下，我一直在使用一些非常通用的global.css样式覆盖Telerik控件的内联声明。

如果使用！important，则只有外部样式才会覆盖内联样式（使用样式属性）。

Answer 2

CSS的{p> Specificity和Priority有时难以处理，在这种情况下：

这个选择器更具体，因为它选择了一个父类特定的div id，然后是他的表子。

div＃copy table

这只是用class：

设置一个表

table.MMPointBalance

此外，如果您在global.css上有!important声明，则必须使用相同或更具体的!important

来处理

为什么外部样式表样式会覆盖内部和内联样式？

2 个答案: