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

在我的网站上，我使用 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 的情况下继承某些属性的原始浏览器样式？

138669 次浏览
小开
最佳答案

I used to set this CSS to remove the reset :

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...

小开

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

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

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.

小开

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

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

An answer for the future: CSS 4 will probably contain the revert keyword, which reverts a property to the initial value it had from the user-agent stylesheet or from user styles (or to the value inherited from a parent, if present) [source].

As of writing this, only Safari supports this – check here for updates on browser support.

In your case you would use:

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

See also this other answer with some more details.

小开

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 {
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 {
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.


提交答案