Html CSS 属性列表样式应该应用于 <ul>/<ol> 还是 <li>?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2408959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:26:47  来源:igfitidea点击:

Should the CSS property list-style be applied to <ul>/<ol> or <li>?

htmlcsshtml-lists

提问by pixeltocode

Most sites show the syntax as applying list-styleto the <li>but I've seen some tutorial sites (like this one) that apply list-styleto the <ul>or <ol>.

大多数站点将语法显示为适用list-style于 ,<li>但我已经看到一些适用于or 的教程站点(例如这个站点)。list-style<ul><ol>

Which is the 'correct' way?

哪个是“正确”的方式?

回答by Pointy

According to the W3C CSS2 reference, which can be found here,

根据 W3C CSS2 参考,可以在这里找到,

Another solution would be to specify 'list-style' information only on the list type elements:

ol.alpha  { list-style-type: lower-alpha }
ul        { list-style-type: disc }

Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.

另一种解决方案是仅在列表类型元素上指定“列表样式”信息:

ol.alpha  { list-style-type: lower-alpha }
ul        { list-style-type: disc }

继承会将“列表样式”值从 OL 和 UL 元素转移到 LI 元素。这是指定列表样式信息的推荐方式。

So you can do it at the overall list level if all of your elements are going to be the same, but you can instead do it at the list entry level if for example some entries would have different glyphs (like a square instead of a disc) to convey some meaning. You can also do both, with the list level style serving as a default to be overridden (but be careful about selector precedence!).

因此,如果您的所有元素都相同,您可以在整个列表级别执行此操作,但是如果例如某些条目具有不同的字形(例如方形而不是圆盘),您可以在列表条目级别执行此操作) 来表达某种意思。您也可以同时使用列表级别样式作为要覆盖的默认值(但要注意选择器优先级!)。

回答by Tom

As not having a list style is generally more common that having a list style, I personally apply it to both in a global reset at the top of my stylesheet.

由于没有列表样式通常比拥有列表样式更常见,我个人将它应用于我的样式表顶部的全局重置中。

回答by Stuart Memo

The spec recommends that you that you set it on <ul>and <ol>tags, and not on <li>.

该规范建议您将其设置为<ul><ol>标签,而不是<li>

See http://www.w3.org/TR/REC-CSS1/#list-style

http://www.w3.org/TR/REC-CSS1/#list-style