Question

我在互联网上读到内部css（<head>的样式部分）优先于外部css（通过链接）。但是，只有在我<link>之前<style>放置<head>时，这才有效。

<link rel="stylesheet" type="text/css" href="estilos.css" />
<style>
    body { background-image: url("images/bgdesert.jpg"); }
</style>

此处将{c}应用于<style>。

但如果我将<style>放在<link>之前，则应用的背景图片就是“estilos.css”上的背景图片。

<style>
    body { background-image: url("images/bgdesert.jpg"); }
</style>
<link rel="stylesheet" type="text/css" href="estilos.css" />

在互联网上，我总是看到，即使我在<link>之后加<style>，优先级也会在<style>。我错了吗？

Answer 1

史蒂文布拉德利谈到Precedence in CSS。声明CSS时的一般经验法则是声明属性所需的特性最少的属性。通过使用此方法，通过声明样式更具体，可以更轻松地覆盖样式。

如果您使用最具特异性，您可能会在以后遇到问题并发现自己必须添加不必要的HTML以便能够添加更多特异性，或者您可能会发现自己不再使用！important或声明内联样式。从最低特异性开始，仅在需要时添加更多。

我认为您还必须考虑页面加载优化。关于CSS使用对页面呈现/加载的影响的Patrick Sexton does a great article。现在，页面加载是搜索引擎排名的一个因素，这一点尤为重要。