如何让浏览器在与内联css具有相同优先级的文件中处理css？

Question

当我直接在HTML中放入<style></style>标签中的css时，它胜过装载的文件中的任何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视为内联样式？

Answer 1

不要使用!important

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

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

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

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

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

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

当然，还有萤火虫（HTML > Style > Show applied styles），但没有更多的截图......你明白了。 ; - ）

Answer 2

你在CSS文档中的分号前加上！important

div {
    width:100px !important;
}

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

Answer 3

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

没有看到你的代码就不可能肯定地说，但你可能只需在foo2.css中的每个样式之前添加一个前缀，如果你有一个.container类，或者如果没有一致的容器然后你可以用body为所有样式添加前缀，这样它们比foo1.css样式更具体，强制它们被使用。

使用！重要或通用前缀不是构建新网站的最佳方式，但如果这是删除内联样式的最简单方法，那么在允许浏览器缓存样式的同时，可以获得巨大的可维护性，这是值得的。

Answer 4

如果您的内联样式如下：

<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会强制您将其添加到任何地方而且你又回到了增加越来越多的特异性......呃。