1

当我将 css<style></style>直接放入 HTML 中的标签时，它胜过加载的文件中的任何 css：

<link href="foo1.css"rel="stylesheet" type="text/css" />

但我不希望 html 中有任何内联样式。所以我将 css 移动到一个名为 foo2.css 的文件中，并且有：

<link href="foo1.css"rel="stylesheet" type="text/css" /> 
<link href="foo2.css"rel="stylesheet" type="text/css" />

我也试过：

<link href="foo2.css"rel="stylesheet" type="text/css" /> 
<link href="foo1.css"rel="stylesheet" type="text/css" />

改变顺序。但这似乎不起作用。我如何告诉浏览器像对待内联样式一样对待 foo2.css？

4

4 回答 4

3

不要使用!important

你以后会后悔的。相反，使用更强的选择器。

.weakSelector { }
div.strongerSelector { }
#strongSelector { }
div#superStrongSelector { }
html > body > div.wrapper > div.content > section > article > p > a:link#superUltraMegaStrongSelector { }

如果您使用相同的选择器，则更强的选择器是文档中稍后出现的选择器。

使用开发者工具（提示：F12在任何浏览器中点击）查看哪个选择器胜出，并使您的选择器更强大。

IE 开发工具中的“Trace Styles”选项卡对于识别更强的选择器特别有用：

IE 开发工具

Chrome 的开发工具还会向您展示样式的来源，但有时您必须滚动并寻找它。

Chrome 开发工具

而且，当然，还有萤火虫 ( HTML > Style > Show applied styles) 但没有更多的屏幕截图......你明白了。;-)

于 2013-04-01T20:39:19.223 回答
2

您在 CSS 文档中将 !important 放在分号之前

div {
    width:100px !important;
}

这将覆盖所有 CSS，包括内联。

于 2013-04-01T20:31:53.463 回答
1

!important只能作为最后的手段使用。真正的目标应该是增加 foo2.css 样式的特异性，因为这是浏览器决定使用哪种样式的方式。

如果没有看到您的代码，就不可能肯定地说，但是.container如果您有一个类，或者如果没有一致的容器，那么您可能只是在 foo2.css 中的每个样式之前添加一个前缀，或者如果没有一致的容器，那么您可以在所有样式的前面加上bodyso它们比 foo1.css 样式更具体，强制使用它们。

使用 !important 或通用前缀并不是构建新站点的最佳方法，但如果这是删除内联样式的最简单方法，那么在允许浏览器缓存您的样式的同时，大幅提高可维护性是值得的。

于 2013-04-01T20:44:17.277 回答
0

如果您的内联样式如下：

<section style="text-align: left; width: 50%; float: right;">
    blah
</section>

我会在 HTML 代码中添加泛型类：

<section style="txtleft w50 right">
    blah
</section>

和匹配的 CSS 辅助规则：

.txtleft {
    text-align: left !important;
}

.w50 {
    width: 50%;
}
.w200p {
    width: 200px;
}

.right {
    float: right !important;
}

结构和样式没有更严格的分离，但它仍然比内联样式更好，并且类是不言自明的（通过阅读 HTML 代码可以看到结构和主要样式，更新样式就像在其中删除/添加类一样简单）。
我补充说!important，因为意图.txtleft很.right明确：如果我添加这些类之一，我确实希望应用相关指令，否则我不会添加它，就这么简单。如果没有!important，任何比类更具体的选择器（或与类一样具体但在这些规则之后编写）将被应用而不是这些选择器。
.w50是另一种情况：根据经验，您可能需要覆盖较小版本的 IE 或@media响应式网页设计规则的宽度，因此添加!important会迫使你在任何地方添加它，你会重新添加越来越多的特异性......嗯。

于 2013-04-01T21:53:11.053 回答