什么是默认列表样式(CSS)?

On my website I use reset.css. It adds exactly this to list styles:

在我的网站上我使用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;
}

The problem is that all list styles are set to NONE with this. I want to revert back original list styles (default) for all lists on website sub-pages only (all lists in .my_container).

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

When I try settings things like list-style-type to inherit is doesn't inherit the browser's default styles just for this CSS property.

当我尝试设置时，要继承的列表样式类型并不是只继承这个CSS属性的浏览器默认样式。

Is there any way to inherit the original browser's styles for certain properties without modifying reset.css?

有没有什么方法可以在不修改reset.css的情况下继承原始浏览器的样式?

7 个解决方案

#1

116

I used to set this CSS to remove the reset :

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

EDIT : with a specific class of course...

编辑:当然是特定的课程……

#2

I think this is actually what you're looking for:

我想这就是你要找的:

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

.my_container li
{
    display: list-item;
}

#3

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

#4

As per the documentation, most browsers will display the <ul>, <ol> and <li> elements with the following default values:

根据文档，大多数浏览器会显示

，

元素，默认值如下:
元素,默认值如下:

Default CSS settings for UL or OL tag:

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

Default CSS settings for LI tag:

LI标签的默认CSS设置:

li { 
    display: list-item;
}

Style nested list items as well:

样式嵌套列表项目以及:

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

Note: The result will be perfect if we use the above styles with a class. Also see different List-Item markers.

注意:如果我们使用以上的样式和一个类，结果将是完美的。还可以看到不同的列表项标记。

#5

You cannot. Whenever there is any style sheet being applied that assigns a property to an element, there is no way to get to the browser defaults, for any instance of the element.

你不能。无论何时，只要应用了任何样式表，将属性分配给元素，就没有办法到达浏览器的默认值，例如元素的任何实例。

The (disputable) idea of reset.css is to get rid of browser defaults, so that you can start your own styling from a clean desk. No version of reset.css does that completely, but to the extent they do, the author using reset.css is supposed to completely define the rendering.

重置的(有争议的)想法。css消除了浏览器的默认设置，这样您就可以从干净的桌面开始自己的样式了。没有复位的版本。css完全做到了这一点，但是在一定程度上，作者使用了reset。css应该完全定义渲染。

#6

You're resetting the margin on all elements in the second css block. Default margin is 40px - this should solve the problem:

重新设置第二个css块中所有元素的边距。默认的保证金是40px -这应该可以解决问题:

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

#7

An answer for the future: CSS 4 will probably contain the revert keyword, which reverts a property to its value from the user or user-agent stylesheet [source]. As of writing this, only Safari supports this – check here for updates on browser support.

未来的答案是:CSS 4可能会包含“恢复”关键字，该关键字将属性从用户或用户代理样式表[source]中恢复为其值。在撰写本文时，只有Safari支持这一功能——请在这里查看浏览器支持的更新。

In your case you would use:

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

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

See also this other answer with some more details.

更多细节请参见另一个答案。

#1

116