时间戳

首页 > 解决方案 > CSS 自定义变量覆盖现在在子级中工作

html - CSS 自定义变量覆盖现在在子级中工作

问题描述

我正在尝试测试一些自定义变量，如在此视频中看到的那样：https ://youtu.be/PHO6TBq_auI?t=546

我在此视频中看到，简单地覆盖 .child 元素中的自定义变量（分配给主体的“颜色”属性的变量）将强制 .child 更改其颜色。但在我的例子中，这不会发生。所以基本上，我的代码如下所示：

<html>
  <head>
    <style>
    
    :root {
      --maincolor: green;
    }
    
    body {
     
      color: var(--maincolor);
    }
    
    .main {
    
    }
    
    .child {
      --maincolor: red;
      /* color: var(--maincolor); */ only if I uncomment this, the collor of the text becomes red
    }
    
    
    
  </style>
  </head>
  
  <body>
    <div class='main'>
    
      <h2>
        Title X
      </h2>
      
      <div class='child'>
        Child text 1
      </div>
      
      <div class='child'>
        Child text 2
      </div>
      
    </div>
  </body>
</html>

我的问题是：为什么视频中的代码有效？有什么我想念的吗？还是 CSS 规范在过去几年发生了变化？（视频来自 2017 年，但描述中的 codepen 链接似乎有点不同）。

我这里也有代码：https ://codepen.io/ice13ill/pen/wvJEeoO

标签： htmlcss

解决方案

推荐阅读