html - CSS第一个列表项，但不是嵌套的

Question

我有

<style>
li {
    font-size: 80%;
}
</style>

<ul>
    <li> level1
    <ul>
        <li> level2
            <ul>                
                <li>level3</li>
            </ul>        
        </li>
    </ul>
    </li>
</ul>

我希望三个中的所有文本都<li>相同，但它们会变小，我如何将它们设置为font-size: 80%？

编辑

最好不要添加类名，因为我正在考虑使用 markdown 来预处理嵌套的项目符号（使其难以影响 html 输出）

Answer 1

使用类来设置元素的样式。这将防止font-size越来越小。

<ul class="myList">
    <li> level1
    <ul>
        <li> level2
            <ul>                
                <li>level3</li>
            </ul>        
        </li>
    </ul>
    </li>
</ul>

CSS

.myList{
  font-size: 80%;
}

Answer 2

凯文的答案可能是您最好的方法，但只是为了提供替代解决方案：

<style>
li {
    font-size: 80%;
}
li li {
    font-size: 100%;
}
</style>

Answer 3

您使用的是相对字体大小，这意味着它们将变为父级大小的 80%，因此每个嵌套列表将逐渐变小。

我建议使用与其父级无关的测量值 - 将它们设置为px或什[rem][1]至与根大小相关。

Answer 4

可能更适合 Markdown 情况的答案是这样的

<style>
.page>ol, .page>ul {
    font-size: 80%;
}
</style>

<div class="page">
<ul>
    ...
</ul>   
</div>

尖括号仅选择直接子节点