html - 与容器相关的字体大小

Question

我需要.list字体大小与主容器相关。我将其设置为 62.5% 并添加了 1.5em font-size，.list但此设置也增加了嵌套.list项目的文本大小。

我正在尝试完成与 rem 单位相同的行为，但能够使用不同于body.

这可能吗？

.container {
  font-size: 62.5%;
}

.list {
  font-size: 1.5em;
}

<div class="container">
  <ul class="list">
    <li>
      <div>
        <div>
          <strong>Free</strong> as a bird
        </div>
      </div>

      <ul class="list">
        <li>
          <div>
            <div>
              <strong>Free</strong> as a bird
            </div>
          </div>
          
          <ul class="list">
            <li>
              <div>
                <div>
                  <strong>Free</strong> as a bird
                </div>
              </div>
              
              <ul class="list">
                <li>
                  <div>
                    <div>
                      <strong>Free</strong> as a bird
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

标签： htmlcsscss-selectorsfont-size