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>

尖括号仅选择直接子节点

css第一个列表项，但不是嵌套列表项

4 个答案: