CSS 特异性 - 外部风格 sheet 与内部风格 sheet 仅使用 类
CSS Specificity - external style sheet vs internal style sheet using just classes
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1
和 .c-hero__headline
。在我的外部样式 sheet 中,我使用 .c-headline-1
,在内部样式 sheet (<style type="text/css">
) 中,我使用 .hero__headline
,但出于某种原因.c-headline-1
属性 值覆盖了一些 .hero__headline
的 属性 值。例如,如果两者都有字体大小声明,.c-headline-1
的行为就好像它具有更高的特异性,因为它覆盖了 .c-hero__headline
的字体大小。
我认为内部样式 sheet 比外部样式 sheet 具有更高的特异性?
所有样式表都一视同仁,重要的是样式声明的顺序。对于可视化,可以这样想象:浏览器获取所有 CSS 文件并将其合并到一个大的 css 文件中(按照它们在源代码中出现的顺序)。如果您知道 CSS 中的规范是如何工作的,那么应该清楚为什么样式会被覆盖。
您确定顺序很重要吗?这不是第一个优先顺序吗,第一个是最重要的,它的样式将首先应用。
- 内联样式
- 内部样式表(带有 head 元素的样式)
- 外部样式表(link href="style.css" 等)
如有错误请指正
外部和内部样式表(在 head 部分)被分配相同的优先级(虽然低于内联样式优先级),然后根据它们的声明顺序给予最高优先级
最后声明的优先级最高
最终顺序如下
- 内联样式(在 HTML 元素内)
- 外部和内部样式表(在头部)--> 最后定义的(内部或外部)具有最高优先级
- 浏览器默认
要了解更多信息,您可以查看此页面的 级联顺序 部分
https://www.w3schools.com/css/css_howto.asp
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1
和 .c-hero__headline
。在我的外部样式 sheet 中,我使用 .c-headline-1
,在内部样式 sheet (<style type="text/css">
) 中,我使用 .hero__headline
,但出于某种原因.c-headline-1
属性 值覆盖了一些 .hero__headline
的 属性 值。例如,如果两者都有字体大小声明,.c-headline-1
的行为就好像它具有更高的特异性,因为它覆盖了 .c-hero__headline
的字体大小。
我认为内部样式 sheet 比外部样式 sheet 具有更高的特异性?
所有样式表都一视同仁,重要的是样式声明的顺序。对于可视化,可以这样想象:浏览器获取所有 CSS 文件并将其合并到一个大的 css 文件中(按照它们在源代码中出现的顺序)。如果您知道 CSS 中的规范是如何工作的,那么应该清楚为什么样式会被覆盖。
您确定顺序很重要吗?这不是第一个优先顺序吗,第一个是最重要的,它的样式将首先应用。
- 内联样式
- 内部样式表(带有 head 元素的样式)
- 外部样式表(link href="style.css" 等)
如有错误请指正
外部和内部样式表(在 head 部分)被分配相同的优先级(虽然低于内联样式优先级),然后根据它们的声明顺序给予最高优先级
最后声明的优先级最高
最终顺序如下
- 内联样式(在 HTML 元素内)
- 外部和内部样式表(在头部)--> 最后定义的(内部或外部)具有最高优先级
- 浏览器默认
要了解更多信息,您可以查看此页面的 级联顺序 部分 https://www.w3schools.com/css/css_howto.asp