什么是默认列表样式（CSS）？

90

在我的网站上，我使用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-typetoinherit这样的不会仅继承此CSS属性的浏览器默认样式。

有什么方法可以继承某些属性的原始浏览器样式，而无需修改reset.css？

html css html-lists

— 阿塔吉
source

4

reset.css是网页设计中最糟糕的反模式之一。

— 2012年

9

与其使用完整的重置样式表，不如考虑使用github.com/necolas/normalize.css之类的东西，它可以为所有元素设置合理的默认值。这样，您可以从所有浏览器的基准开始，并可以从那里开始构建基准。另外，您不必添加额外的代码即可返回默认设置！

— 奥利·霍奇森

1

@OllyHodgson是的，但是我有特定的原因想要使用reset.css。我实际上需要尽可能地清除样式，并且我想重新编写它-而不是相反：)

— Atadj 2012年

1

如果要擦除它们并重写它们，这个问题的意义是什么？据我所知，您有两个选择：1）特别避免重置列表样式，以便保留默认值2）重置它们，并提出自己的列表样式。

— BoltClock

1

@BoltClock-需要澄清的是-我想让用户有机会从头开始构建自己的列表（我为每种可能的样式添加了类）-我只是想知道是否存在类似“默认”设置的内容，但是由于没有任何设置默认样式-我将只创建一个。

— Atadj 2012年

148

我曾经设置此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; 
}

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

— ess
source

到目前为止，它的工作方式应为:)我认为这解决了我的问题。我要更多嵌套表等测试

— Atadj

5

它不会“还原原始列表样式（默认）”。它只是设置一些样式。

— Jukka K. Korpela

我同意，但是无论采取哪种方式，目标都是树立某种风格。该CSS给出了列表的基本样式，仅此而已。

— zessx

2

列表样式类型没有“默认”选项，我在得到答案后才发现。浏览器只是添加了一些样式，这些样式通常在浏览器之间是不一致的。

— Atadj 2012年

1

我也有人设置显示：内联块；看来需要列表项才能使项目符号再次显示。

— 2015年

32

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

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

.my_container li
{
    display: list-item;
}

— 冷冷
source

是的，我认为这个答案也很重要。inherit从父容器继承样式，并且未将样式设置为默认浏览器值。initial确保做到这一点（我发现了它的存在以后），但你ul { list-style: initial; }并ol { list-style: initial; }会产生有效的结果？list-style不管将其应用于哪个元素，它都不会设置为其初始值吗？两种类型的列表的initial值disc outside none都不会吗？

— Atadj 2014年

1

太神奇了，initial我从未想过！

— BenjaminRH

8

initialIE msdn.microsoft.com/zh-cn/library/的

— 2014年

12

按照文件，大多数浏览器将显示<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; 
}

注意：如果将以上样式与类一起使用，则结果将是完美的。另请参见不同的列表项标记。

— 雷扎·马蒙（Reza Mamun）
source

如果是这种情况，则嵌套列表将在顶部和底部边缘添加任何新级别。

— VorganHaze

10

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;
}

— 杰里加丘
source

1

谢谢救了我的命，想知道为什么我的子菜单中出现了地狱。

— 阿修罗

这将在任何嵌套列表上添加vertical.margij。

— VorganHaze

4

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

reset.css的（有争议的）想法是摆脱浏览器的默认设置，以便您可以从干净的桌面开始自己的样式。reset.css的任何版本都不能完全做到这一点，但是在一定程度上，使用reset.css的作者应该完全定义渲染。

— Jukka K.Korpela
source

2

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

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

— 奥米·安迪隆
source

1

未来的答案：CSS 4可能包含revert关键字，该关键字将属性从用户或用户代理样式表[ source ]恢复为其值。撰写本文时，仅Safari支持此功能–在此处检查查看有关浏览器支持的更新。

在您的情况下，您将使用：

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

另请参阅此其他答案以及更多详细信息。

— 塔尼厄斯
source