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

外部和内部样式表（在头部）被分配相同级别的优先级（虽然低于内联样式优先级），然后根据它们的声明顺序给予最高优先级

最后一个声明的优先级最高

---

最终顺序如下

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

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

Answer 2

所有样式表都被同等对待，重要的是样式声明的顺序。对于可视化，可以这样想象：浏览器获取所有 CSS 文件并将它们组合成一个大的 css 文件（按照它们在源代码中出现的顺序）。如果您知道 CSS 中的规范是如何工作的，那么应该清楚为什么样式会被覆盖。

Answer 3

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

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

如果我错了，请纠正我。