Styling ordered lists with CSS
I 开发者_StackOverflow中文版have an ordered list in HTML. I would like to add styling only to the numbers (1,2,3,...), and not to the list items themselves.
Is there a way to refer to these numbers ?
Thanks !
CSS2 provides for control over generated content, which will let you style the auto-generated content independently of the rest of the item using the :before pseudoclass. Here's a solution that meet's the OP's follow-up criteria (background color on the list enumerator but not the item).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { margin: 0; padding: 10px; }
ol {
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: block;
padding: 10px 0;
margin: 0 0 10px 0;
}
li:before {
content: counter(item);
/*
To generate punctuation after the number, just precede or follow with a string:
content: "Chapter " counter(item) " >> ";
To make nested counters (1, 1.1, 1.1.1, etc.), use:
content: counters(item, ".");
*/
counter-increment: item;
background-color: #ddd;
margin-right: 15px;
padding: 10px;
}
ol li ol { margin-bottom: -10px; padding-top: 10px; }
ol li ol li { margin: 10px 0 0 30px; }
</style>
</head>
<body>
<ol>
<li>Turtles</li>
<li>Lizards
<ol>
<li>Salamanders</li>
<li>Geckos</li>
</ol>
</li>
<li>Velociraptors</li>
</ol>
</body>
</html>
Yes, you simply style the ol element and then override the style on the li element.
ol
{
color: blue;
font-style: italic;
}
ol li p
{
color: black;
font-style: normal;
}
with
<ol>
<li><p>Text</p></li>
<li><p>Text</p></li>
<li><p>Text</p></li>
</ol>
You can change the p tags to <divs> if you want, but if you keep them as p's you'll have to strip margins and paddings.
Initially I was just going to comment on cowbellemoo's answer, as it does not work in IE7 and I wanted to explain how to achieve IE7 compatability, but I suppose my solution is a totally different answer.
His answer is all good and well, but it won't work in IE7. So if that's important to you, here's another approach you can take, based off of this A List Apart article: http://www.alistapart.com/articles/taminglists/#custom
The Markup
<ul>
<li><span>01.</span> Text content</li>
<li><Span>02.</span> More text content</li>
</ul>
The CSS
ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
There are a few variations on this you could do, either floating the <span> and giving it a width & margin, or setting the <li> to position:relative;, giving it appropriate padding, and absolutely positioning your span in its right place.
加载中,请稍侯......
精彩评论