Question

我正在使用rems来设置字体的大小，并且在某些断点处我想缩放字体的大小而不是整个页面只是某个容器中的文本。我知道如果我改变class User { xp : int } class UserXPHelpers { constructor(levelsModel:XPLevelsModel) {} getCurrentLevel(user:User) : int {} getPercentProgressThroughLevel(user:User) : Number {} }的字体大小，它将改变页面上所有元素的大小，但是我怎样才能改变某个容器中子节点的大小，例如。在下面的示例中html，这可能吗？ 我希望将容器整体扩展，而不是为每个孩子指定大小。：

CSS

.container

HTML

html{
    font-size: 13px;
  }

  p{
    font-size:1rem;
    }

h1{
font-size:2rem;
}

.container{
   font-size:3rem;
}

Answer 1

使用selector *定位所有儿童：

＆＃13;

html {
  font-size: 13px;
}
p {
  font-size: 1rem;
}
h1 {
  font-size: 2rem;
}
.container * {
  font-size: 12px;
  color: red;
}

＆＃13;

<h1>Main title</h1>
<p>Main text</p>

<div class="container">
  <h1>Title</h1>
  <p>Text</p>
</div>

＆＃13;

Answer 2

请尝试以下操作： Demo

.container h1{
     font-size:3rem;
     color:red;
}

Answer 3

您可以通过以下方式在特定Multimap中设置特定的<p>：

.container

每个容器中的

字体大小都不同。

仅增加元素子元素的字体大小

3 个答案: