CSS特异性-仅使用类的外部样式表与内部样式表

Question

我在一个HTML元素上有两个CSS类：.c-headline-1和.c-hero__headline。在我的外部样式表中，我使用.c-headline-1，在内部样式表（<style type="text/css">）中，我使用.hero__headline，但是由于某些原因，.c-headline-1属性值被覆盖.hero__headline的某些属性值。例如，如果两个都具有字体大小声明，则.c-headline-1的行为就好像具有更高的特异性，因为它覆盖了.c-hero__headline的字体大小。

我认为内部样式表的特异性比外部样式表高或没有？

Answer 1

所有样式表的处理方式相同，重要的是样式的声明顺序。为了进行可视化，请按照以下方式进行想象：浏览器将所有CSS文件合并到一个大的CSS文件中（按它们在源代码中出现的顺序）。如果您知道CSS中的规范是如何工作的，那么应该清楚为什么会覆盖样式。

Answer 2

外部和内部样式表（在头部）分配了相同的优先级（尽管不及内联样式优先级），然后根据其声明顺序赋予最高优先级

最后声明的优先级最高

---

最终顺序如下

1. 内联样式（在HTML元素内）
2. 外部和内部样式表（在头部）-> 最后定义的（内部或外部）样式具有最高优先级
3. 浏览器默认值

要了解更多信息，可以查看此页面的层叠顺序部分 https://www.w3schools.com/css/css_howto.asp

Answer 3

您确定订单很重要吗？它不是不是优先顺序最高的优先顺序，第一位是最重要的，其样式将首先应用。

1. 内联样式
2. 内部样式表（带有head元素的样式）
3. 外部样式表（链接href =“ style.css”等）

如果我错了，请纠正我。