链接元素的顺序（对于外部css）和内部css无关紧要，对吗？

Question

我知道，如果我们在同一选择器上同时使用内部CSS和外部CSS，则内部样式应具有更高的优先级，并覆盖外部样式。但是，我在这里遇到了一个问题，无法弄清原因。

我在head元素中具有以下样式定义：

<link rel="stylesheet" href="styles.css">
<style type="text/css">
    h2 {font-family: verdana; color: red;}
</style>enter code here

在styles.css中，我有

h2 {color: blue;}

然后样式将按其应有的方式工作-h2元素为红色。

但是如果我将链接元素放在内部样式之后：

<style type="text/css">
    h2 {font-family: verdana; color: red;}
</style>
<link rel="stylesheet" href="styles.css">

然后级联规则不再起作用-h2是蓝色而不是红色，这意味着外部样式现在比内部样式具有更高的优先级。

这没有道理，但我不知道为什么。有人可以启发我吗？ TIA。

Answer 1

如果您以这种方式链接，则此功能完全可以正常工作。以后出现的样式将覆盖以前的样式。 （如果选择器完全相同）。

通过“内部”，您可能指的是“内联”样式，这些样式确实具有优先级，并且将覆盖任何其他样式。

示例：

<h2 style="color: orange">Hello world</h2>

此“内联样式规则”将覆盖大多数其他规则。 （有多种方法可以覆盖此问题）