我创建了一个嵌套的ol li为我的网站列出 CSS 中的类，但由于每个li显示在不同的font-size。虽然我已经定义了font-size to it.
.number_list ol {
font:normal 1.2em 'Arial' ,Helvetica;
text-align:justify;
}
.number_list li{
list-style:decimal;
list-style-position:outside;
font-size:1.2em;
}
.number_list ol li{
list-style:lower-alpha;
list-style-position:outside;
margin-right:5px;
font-size:1.2em;
}
.number_list ol li ol li {
list-style:lower-roman;
list-style-position:outside;
margin-right:5px;
margin-top:5px;
font-size:1.2em;
}
那是因为你正在使用em， 您可以使用rem反而。
em等于适用于相关元素的父元素的字体大小。反而rem应用于元素的根。
From MDN
em
该单位代表计算的font-size的元素。如果使用在font-size财产本身，它代表继承的font-size的元素。
该单元通常用于创建可扩展的布局，即使用户更改页面的大小，也能保持页面的垂直节奏。
字体。 CSS 属性line-height, font-size, margin-bottom
and margin-top通常具有以 em 表示的值。
rem
该单位表示根元素的字体大小（例如font-size of the <html>元素）。当用于此字体大小时
根元素，它代表其初始值。
该单元对于创建完美可扩展的布局非常实用。如果目标浏览器不支持，也可以实现这样的布局
使用em单位，尽管这稍微复杂一些。
.number_list ol {
font: normal 1.2rem 'Arial', Helvetica, text-align:justify;
}
.number_list li {
list-style: decimal;
list-style-position: outside;
font-size: 1.2rem;
}
.number_list ol li {
list-style: lower-alpha;
list-style-position: outside;
margin-right: 5px;
font-size: 1.2rem;
}
.number_list ol li ol li {
list-style: lower-roman;
list-style-position: outside;
margin-right: 5px;
margin-top: 5px;
font-size: 1.2rem;
}
<div class="number_list">
<ol>
<li>test a</li>
<li>test b</li>
<li>test c</li>
<li>test d
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
</li>
</ol>
<div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
