CSS 特异性 - 内部、内联和外部样式

Question

我知道内联比内联更具特异性，但内部比内联更具特异性吗？还是相反？

内部：

<style>
p{
color: red;
}
</style>

内嵌：

<p style="color:blue">

外部：

p{
color:green;
}

Answer 1

不，内部不接管内联。内联样式始终是最高优先级。来自 Mozilla Docs：

添加到元素的内联样式(例如，style="font-weight: bold;"(总是覆盖外部样式表中的任何样式，因此可以被认为是具有最高的特异性。

这些"外部样式表"还包括head或body中的style标签。亲眼看看：

p {
color: red;
}

<style>
p {
color: red;
}
</style>
<p style="color: blue">
Hello!
</p>
<style>
p {
color: red;
}
</style>

无论是之前还是之后，唯一会覆盖内联样式的是!important，您应该避免使用它。请参阅上面的 MDN 链接。

---

最后，当你说，

我知道内联比外部更具特异性 [...]

因为特异性是一个特殊的CSS概念。是的，内联样式将覆盖外部样式(不使用!important时(，但不要将特殊性与优先级混淆。CSS 规则的排名方式有两种：

1. 特 异性
2. 和订单。

这包括跨单独文件的顺序。如果将style标记放在link标记之前，则外部样式将覆盖内部样式(如果它们具有相同的特异性(。

同样，这不太适用于内部风格，这主要是对"特异性"的语义澄清，但指出并没有什么坏处。