CSS特异性-内部vs内联vs外部样式

Question

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

内部：

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

内联：

<p style="color:blue">

外部：

p{
  color:green;
}

Answer 1

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

  

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

这些“外部样式表”还包含style或head中的body标签。亲自看看：

p {
  color: red;
}

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

<p style="color: blue">
  Hello!
</p>

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

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

---

还...

  

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

并非总是如此。 CSS规则以两种方式排名：

1. 专长
2. 和订单。

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