Html 无限覆盖CSS类_Html_Css - Fatal编程技术网

Html 无限覆盖CSS类

html css

Html 无限覆盖CSS类,html,css,Html,Css,这更像是一个理论问题 CSS的覆盖堆栈是无限的吗？例如，每个覆盖是否总是有一个CSS覆盖假设我写了这篇文章： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> .a { color: red; } /

这更像是一个理论问题

CSS的覆盖堆栈是无限的吗？例如，每个覆盖是否总是有一个CSS覆盖

假设我写了这篇文章：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
      .a {
        color: red;
      }
      /* Override it again */
      div.a {
        color: blue;
      }
      /* Again! */
      body div.a {
        color: yellow;
      }
      /* Again!! :) */
      html body div.a {
        color: yellow;
      }
      /* AND AGAIN!! */
      html body div.a {
        color: pink !important;
      }
    </style>
  </head>
  <body>
    <div class="a">a</div>
  </body>
</html>


标题
.a{
颜色：红色；
}
/*再次覆盖它*/
a组{
颜色：蓝色；
}
/*又来了*/
身体a组{
颜色：黄色；
}
/*再一次！！：）*/
html正文部分a{
颜色：黄色；
}
/*再一次*/
html正文部分a{
颜色：粉红色！重要；
}
A.

是

！重要信息

与

html body div.a

结合使用

div.a

的绝对最高级别覆盖？

必须始终存在具有更高覆盖的内容吗？

使用

进行内联样式设置！重要提示

applied是我使用过的最高覆盖率

例如：

将覆盖所有其他应用的css

理论上，您只需重复一条规则即可增加特异性

.foo.foo.foo { }

实际上，浏览器最终会将选择器视为组件太多而忽略它

（还有样式属性，它比任何选择器都更具体）

如果您使用

为div.a
声明内联样式规则！重要信息

声明它仍将覆盖

标记中声明的规则

任何内联规则通常都会对内部或外部声明的样式进行过度限定，而与用于指定该规则的选择器的数量无关。内联规则被内部或外部样式过度限定的唯一时间是

！重要信息

声明已被使用-但如果该声明用于要覆盖的内联样式，您将受到诅咒

在这种情况下，您需要应用一些javascript来重置属性。

Read