html - 如何让浏览器以与内联 css 相同的优先级处理文件中的 css？

Question

当我将 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？

Answer 1

不要使用!important

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

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

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

使用开发人员工具(提示:在任何浏览器中按 F12)查看哪个选择器获胜，并使您的选择器更强大。

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

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

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