Styling ordered lists with CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-26 02:54 出处：网络

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.

相关专题：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.