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



我在一个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的字体大小。

我认为内部样式表比外部样式表具有更高的特异性,否?

外部和内部样式表(在 head 部分中(被分配相同的优先级(尽管不如内联样式优先级(,然后根据它们的声明顺序给出最高优先级

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


最终顺序如下

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

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

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

你确定顺序很重要吗?它不是首先是优先级顺序,其中第一是最重要的,并且首先应用其样式。

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

如果我错了,请纠正我。

最新更新