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

标签 css css-specificity

我在一个 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. 外部和内部样式表(在头部)--> 最后定义的(内部或外部)具有最高优先级
  3. 浏览器默认

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

关于CSS 特异性 - 外部样式表与仅使用类的内部样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52073885/

相关文章:

css - 覆盖伪元素子元素的最佳方法(例如,:before)

html - CSS 优先规则未正确应用于输入框的宽度

css - 2 列 100% 布局 - 1 个固定列和 1 个动态列

jquery - 将图像设置为 div

伪类和伪元素在特异性计算中的 CSS 区别?

html - ID 属性的属性选择器是否不如 ID 选择器具体?

css - 文本字符串中的特殊性

css - 防止在 WebKit/Blink 中为 MacOS 触控板用户隐藏滚动条

css - 两行两列流体页面布局 Bootstrap

html - 垂直对齐适用于 block 元素