Question

这更像是一个理论问题。

CSS ad-infinitum的覆盖堆栈是什么？例如，是否每次覆盖都会有一个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>

!important html body div.a与div.a的绝对最高级别覆盖是否合并了use warnings; use strict; open my $fh, '<', 'in.txt' or die $!; while (my $x = $fh){ $DB::single=1; print "$x\n"; }？必须始终存在具有更高覆盖的东西吗？

Answer 1

理论上，你可以简单地重复一个规则来提高特异性。

.foo.foo.foo { }

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

（还有style属性，比任何选择器更具体）

Answer 2

使用!important的内联样式是我曾经使用过的最高覆盖。

实施例： <div class="a" style="color: blue !important">a</div>将覆盖所有其他已应用的CSS

Answer 3

如果您使用div.a声明为!important声明内联样式规则，它仍将覆盖<style>代码中声明的规则。

无论用于指定该规则的选择器数量如何，任何内联规则通常都会过度限定内部或外部声明的样式。内联或外部样式过度限定内联规则的唯一情况是使用!important声明时 - 但如果在内联样式上使用该声明，则要覆盖您将被诅咒。

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

无限覆盖CSS类

3 个答案: