我的印象是,设置列表项的样式的最佳方法是包装其内容,将样式应用于ol,并通过wapper覆盖该样式(如Make ABC Ordered List Items Have Bold Style中所述)。
这很简单,但由于相对大小是根据继承的大小计算的,因此“覆盖”步骤需要在li及其内容之间进行一定程度的不必要的耦合。例如:
HTML:
<ol>
<li><p>First item</p></li>
<li><p>Second item</p></li>
</ol>
CSS:
ol {
font-size 2em;
}
p {
font-size: .5em;
}
上面将正确地加倍ol的字体大小,并将所包含的p的加倍大小减半(即它将保持原始大小)。希望你能在这里看到问题 - 如果我想将li的字体大小增加三倍,我还必须将p的字体大小更改为.33以抵消相对增加。
我想在最佳实践的名义中使用相对大小,但也希望避免这种令人讨厌的耦合。有没有办法让我的蛋糕也可以吃?我知道这不是什么大问题,通常这只是相对大小的工作方式,但是由于几乎一个黑客开始的耦合使我觉得有点脏,所以我想我会四处询问。
答案 0 :(得分:1)
为什么不创建诸如
之类的规则ol p { font-size:2em; }
你可以根据需要指定字体大小,这种方式没有耦合,唯一的问题是没有相对字体大小,除非你使用百分比而不是字体的固定大小。