使用CSS為有序列表設置樣式

Question

我有一個HTML的有序列表。 我想只為數字（1,2,3，...）添加樣式，而不是列表項本身。

有沒有辦法參考這些數字？

謝謝！

Answer 1

CSS2提供對生成內容的控制，這將允許您使用:before pseudoclass :before獨立於項目的其余部分來設置自動生成的內容的樣式。 這是符合OP的后續標准的解決方案（列表枚舉器的背景顏色，但不符合項目）。

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

Answer 2

是的，您只需設置ol元素的樣式，然后覆蓋li元素上的樣式。

ol
{
    color: blue;
    font-style: italic;
}
ol li p
{
    color: black;
    font-style: normal;
}

同

<ol>
    <li><p>Text</p></li>
    <li><p>Text</p></li>
    <li><p>Text</p></li>
</ol>

如果需要，可以將p標記更改為<divs> ，但如果將它們保留為p則必須剝離邊距和填充。

Answer 3

最初我只是評論cowbellemoo的答案，因為它在IE7中不起作用，我想解釋如何實現IE7的兼容性，但我想我的解決方案是一個完全不同的答案。

他的答案一切都很好，但在IE7中不起作用。 因此，如果這對您來說很重要，請根據此A List Apart文章提供另一種方法： http ： //www.alistapart.com/articles/taminglists/#custom

標記

<ul>
    <li><span>01.</span> Text content</li>
    <li><Span>02.</span> More text content</li>
</ul>

CSS

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

您可以做一些變化，要么浮動<span>並給它一個寬度和邊距，要么將<li>設置為position:relative; 給它適當的填充，並將你的跨度絕對定位在正確的位置。

使用CSS為有序列表設置樣式

問題描述

3 個解決方案

解決方案1
5 已采納 2010-04-10 17:34:29

解決方案2
3 2010-04-10 13:30:23

解決方案3
0 2011-06-16 23:45:04

使用CSS為有序列表設置樣式

問題描述

3 個解決方案

解決方案1 5 已采納 2010-04-10 17:34:29

解決方案2 3 2010-04-10 13:30:23

解決方案3 0 2011-06-16 23:45:04

解決方案1
5 已采納 2010-04-10 17:34:29

解決方案2
3 2010-04-10 13:30:23

解決方案3
0 2011-06-16 23:45:04