How can I restore the “auto” values for list-style

2020-07-09 09:55发布

By default, an unstyled set of nested <ul> lists looks like this (in Chrome, Firefox, and IE at least):

Nested <ul> screenshot

The top level has a list-style-type of disc, the next level is circle, and subsequent levels are square.

If I include a stylesheet that changes the list-style-type to none, is there a simple way to revert back to the "automatic bullet types" later in the document? (e.g., override with a subsequent CSS definition or JavaScript style change)

Basically, I'm looking for something like list-style-type: auto; (which is apparently not valid and has no effect):

<style type="text/css">
    ul { list-style-type: none; }
    ul { list-style-type: auto; } /* Does not work */
</style>

Setting the list-style-type back to disc changes every bullet in the list and I no longer see different bullets at different levels, so that doesn't work either.

Is the only way to accomplish this by explicitly defining styles for every level? e.g.:

<style type="text/css">
    ul { list-style-type: disc; }
    ul ul { list-style-type: circle; }
    ul ul ul { list-style-type: square; }
</style>

标签: css
3条回答
家丑人穷心不美
2楼-- · 2020-07-09 10:39

I recently encountered a need for this (no nesting, but still preferred not implicitly setting roman vs. greek etc.) and used inherit with success. Naturally, effect will vary depending on what rules have been defined, but it worked in my case.

查看更多
我命由我不由天
3楼-- · 2020-07-09 10:40

Is the only way to accomplish this by explicitly defining styles for every level?

Yep, using ul, it's the only way. Basically this exactly what chrome is doing.

If you still want to keep the chrome style starting at the second level, do not use ul for the first level! Use a div...

查看更多
一夜七次
4楼-- · 2020-07-09 10:55

use classes to write for something like:

ul { list-style-type: none; }
.list_default { list-style-type: circle; }

and then on the ul you want to apply bullets to,

<ul class="list_default">
    <li>one</li>
    <li>two</li>
</ul>

Also, please do take other posters advice when it comes to not using "auto" behaviors. There are so many proprietary extensions to the standard and manufacturer-defined defaults that will just make you pull your hair out later. Develop the good habit now of not depending on their sanity.

查看更多
登录 后发表回答