Question

我有一个典型的HTML结构，如下面的代码所示。

<div class="common-parent">
  <div class="parent>
    <div class="child">
      <h2>Child 1</h2>
      <span>Some text here...</span>
    </div>
    <div class="new-child">
      <h2>New Child</h2>
      <div>
        <span>Some text here...</span>
      </div>            
    </div>
  </div>
</div>

现在，我需要更改div.parent中包括自身在内的所有元素的字体大小或rem大小。

由于默认的rem大小等于16px，所以我需要将其减小到12px，即75％。我无法在'html'标记上进行更改，因为它也会影响所有其他元素。

如何仅使用SCSS或CSS对“ div.parent”及其内部的所有元素进行更改？

Answer 1

字体uint'rem'表示'Root EM'，它始终取决于根元素<HTML>。因此，如果您希望字体大小取决于特定父元素的字体大小设置，则可以使用em或percent等其他单位。

Answer 2

只需使用像素测量来“重置”基础font-size：

.common-parent div.parent{
    font-size: 12px;
}

然后，.common-parent div.parent中包含的每个元素都将1em读为12px。

注意：通常，您不应该将像素单位与em混合使用，但是要重置基本字体大小，这是合理的解决方案。

仅为特定div内的所有元素重置rem或font-size

2 个答案: