什么是默认列表样式 (CSS)？答案

【问题标题】：What is default list styling (CSS)?什么是默认列表样式 (CSS)？
【发布时间】：2012-07-29 01:14:24
【问题描述】：

在我的网站上，我使用 reset.css。它将这个添加到列表样式中：

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

问题是所有列表样式都设置为NONE。我只想恢复网站子页面上所有列表的原始列表样式（默认）（.my_container 中的所有列表）。

当我尝试设置诸如 list-style-type 到 inherit 之类的东西时，它不会仅针对此 CSS 属性继承浏览器的默认样式。

有什么方法可以在不修改reset.css的情况下继承原始浏览器的某些属性的样式？

【问题讨论】：

reset.css 是网页设计中最糟糕的反模式之一。
而不是一个完整的重置样式表，考虑像github.com/necolas/normalize.css 这样为所有元素设置合理的默认值。这样，您就可以从所有浏览器的基线开始，并可以从那里进行构建。此外，您无需添加额外代码即可恢复默认设置！
@OllyHodgson 是的，但是我有具体的原因要使用 reset.css。我实际上需要尽可能多地清除样式，并且我想重写它——而不是相反:)
如果你想擦除它们并重写它们，这个问题的意义何在？据我所知，您有两个选择：1）特别避免重置列表样式，因此您保留默认值 2）重置它们，并提出您自己的列表样式。
@BoltClock - 澄清一下 - 我想让用户有机会从头开始构建自己的列表（我为每种可能的样式添加了类） - 我只是想知道是否有类似“默认”的东西设置，但由于没有任何默认样式 - 我将只创建一个。

标签： html css html-lists

【解决方案1】：

我曾经设置这个 CSS 来移除重置：

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

编辑：当然是特定的课程...

【讨论】：

它不会“恢复原始列表样式（默认）”。它只是设置一些样式。
我同意，但无论如何，目标只是设置一些风格。这个 CSS 为列表提供了一个非常基本的样式，仅此而已。
list-style-type 没有“默认”选项，我在得到答案后发现。浏览器只是添加了一些浏览器之间通常不一致的样式。
我也有人设置了 display: inline-block;它似乎需要列表项才能使项目符号再次显示。

【解决方案2】：

您正在重置第二个 CSS 块中所有元素的边距。默认边距是 40px - 这应该可以解决问题：

.my_container ul {list-style:disc outside none; margin-left:40px;}

【讨论】：

【解决方案3】：

你不能。每当应用任何将属性分配给元素的样式表时，对于该元素的任何实例，都无法获取浏览器默认值。

reset.css 的（有争议的）想法是摆脱浏览器默认设置，这样您就可以从干净的桌面开始自己的样式设置。没有任何版本的 reset.css 可以完全做到这一点，但就他们所做的而言，使用 reset.css 的作者应该完全定义渲染。

【讨论】：

【解决方案4】：

我认为这实际上是您正在寻找的：

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

【讨论】：

是的，我认为这个答案也很重要。 inherit 继承父容器的样式，并且不会将它们设置为默认浏览器值。 initial 会这样做（我后来发现了它的存在）但是你确定 ul { list-style: initial; } 和 ol { list-style: initial; } 会产生有效的结果吗？无论它应用于哪个元素，它是否都将list-style 设置为其初始值？对于这两种类型的列表，initial 的值不会是 disc outside none 吗？
太棒了，initial 我从来没有想过！
initial 不支持任何版本的 IE msdn.microsoft.com/en-us/library/…

【解决方案5】：

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

【讨论】：

谢谢救了我的命，想知道为什么我的子菜单中有填充。
这将在任何嵌套列表中添加vertical.margij。

【解决方案6】：

未来的答案：CSS 4 可能会包含 revert 关键字，它将属性恢复为它从用户代理样式表或用户样式（或从父级继承的值，如果存在）具有的初始值) [source]。

在撰写本文时，只有 Safari 支持 - check here 以获取浏览器支持的更新。

在你的情况下，你会使用：

.my_container ol, .my_container ul {
    list-style: revert;
}

请参阅this other answer 了解更多详情。

【讨论】：

【解决方案7】：

根据文档，大多数浏览器将显示具有以下默认值的 <ul>、<ol> 和 <li> 元素：

UL 或 OL 标签的默认 CSS 设置：

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

LI 标签的默认 CSS 设置：

li { 
    display: list-item;
}

样式嵌套列表项：

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

注意：如果我们将上述样式与类一起使用，结果将是完美的。另请参阅不同的 List-Item 标记。

【讨论】：

如果是这种情况，那么嵌套列表将添加任何新级别的顶部和底部边距。