CSS 变量不尊重选择器优先级？

Question

我正在为网站构建器编写一些代码，这给我带来了问题。我们使用 CSS 变量来定义全局样式，并提供桌面和移动布局选项，例如：

:root {
  --section-padding-top: 2rem;
  --section-padding-right: 8rem;
  --section-padding-bottom: 2rem;
  --section-padding-left: 8rem;
}

@media only screen and (max-width: 767px) {
  #main {
    --section-padding-top: 3rem;
    --section-padding-right: 0rem;
    --section-padding-bottom: 3rem;
    --section-padding-left: 0rem;
  }
}

我们在移动覆盖中使用

#main

选择器来确保这些坚持。原因是我们允许用户覆盖上面为特定部分定义的全局样式，我们的代码将在页面中生成一个 CSS 块，如下所示：

<style>
  .box-794ccd158158463bae325e0eb4c1c939 {
    --section-padding-top: 0rem;
    --section-padding-right: 8rem;
    --section-padding-bottom: 0rem;
    --section-padding-left: 8rem;
  }
  @media only screen and (max-width: 767px) {
    #main .box-794ccd158158463bae325e0eb4c1c939 {
      /* No mobile overrides in this example */
    }
  }
</style>

具有覆盖填充的部分的 HTML 大致如下所示：

<body id="main">
  <section data-id="d1b57912-1e94-4014-929e-02a38d893710" class="section component-1ca0a679fc4a4ba7a1e6b1fd9bec611e section-d1b579121e944014929e02a38d893710">
    <div class="box box-794ccd158158463bae325e0eb4c1c939 section-box">
      <div class="box-content">
        <!-- Content -->
      </div>
    </div>
  </section>
</body>

应用变量的 CSS 如下所示：

.section-box {
  padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
}

这里的想法是桌面覆盖（范围为类（

.box-794ccd158158463bae325e0eb4c1c939

））不会覆盖全局移动变量（范围为ID（

#main

））。

实际发生的情况是浏览器（Chrome）尊重桌面覆盖，这是稍后定义的（在页面上），并忽略 ID 范围的全局移动变量，这些变量是之前在 .

中加载的外部样式表中定义的。

看这里：

对于为什么会这样有什么想法吗？谢谢！

编辑：更新添加我也用

!important

尝试过此操作，但仍然被覆盖。

这里的预期行为是全局定义将优先，因为它使用 ID 选择器（现在也是一个！重要的定义）。

有人熟悉 CSS 变量中忽略选择器优先级的行为吗？我在任何地方都找不到这个记录。

Answer 1

来自MDN：

“直接目标元素的样式将始终优先于继承的样式，无论继承规则的特殊性如何。”

所以看来这条规则：

.box-794ccd158158463bae325e0eb4c1c939 {
  --section-padding-top: 0rem;
  --section-padding-right: 8rem;
  --section-padding-bottom: 0rem;
  --section-padding-left: 8rem;
}

优先于此规则：

@media only screen and (max-width: 767px) {
  #main {
    --section-padding-top: 3rem;
    --section-padding-right: 0rem;
    --section-padding-bottom: 3rem;
    --section-padding-left: 0rem;
  }
}

CSS 变量不尊重选择器优先级？

问题描述投票：0回答：1

1个回答

最新问题

CSS 变量不尊重选择器优先级？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1