Html 使用CSS设置有序列表的样式_Html_Css

Html 使用CSS设置有序列表的样式

html css

Html 使用CSS设置有序列表的样式,html,css,Html,Css,我有一个HTML的有序列表。我只想将样式添加到数字（1,2,3，…），而不是列表项本身有没有办法参考这些数字谢谢是的，您只需设置ol元素的样式，然后覆盖li元素上的样式 ol { color: blue; font-style: italic; } ol li p { color: black; font-style: normal; } 与正文正文正文如果需要，您可以将p标记更改为，但如果将它们保留为p，则必须去除边距和填充。CSS2提供了

我有一个HTML的有序列表。我只想将样式添加到数字（1,2,3，…），而不是列表项本身

有没有办法参考这些数字

谢谢

是的，您只需设置

ol

元素的样式，然后覆盖

li

元素上的样式

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

与


正文
正文
正文

如果需要，您可以将

标记更改为

，但如果将它们保留为

，则必须去除边距和填充。

CSS2提供了控制，这将允许您使用

:before

伪类独立于项目的其余部分来设置自动生成内容的样式。这里有一个满足OP后续标准的解决方案（列表枚举器上的背景色，但不是项目）


正文{margin:0；padding:10px；}
ol{
计数器重置：项目；
保证金：0；
填充：0；
}
李{
显示：块；
填充：10px0；
裕度：0 10px 0；
}
李：在{
内容：柜台（项目）；
/* 
要在数字后生成标点符号，只需在前面或后面加一个字符串：
内容：“第章“计数器（项目）”>>”；
要制作嵌套计数器（1、1.1、1.1.1等），请使用：
内容：计数器（项目“.”）；
*/
反增量：项目；
背景色：#ddd；
右边距：15px；
填充：10px；
}
ol li ol{页边距底部：-10px；填充顶部：10px；}
ol li ol li{边距：10px 0 0 30px；}
乌龟
蜥蜴
蝾螈
壁虎

迅猛龙

起初我只是想对cowbellemoo的答案发表评论，因为它在IE7中不起作用，我想解释如何实现IE7兼容性，但我想我的解决方案是一个完全不同的答案

他的答案很好，但在IE7中不起作用。因此，如果这对您很重要，根据这篇单独列出的文章，您可以采取另一种方法：

标记

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

您可以在这方面做一些变化，要么浮动

并给它一个宽度和边距，要么将

设置为

位置：相对，给它适当的填充，并将您的跨度绝对定位在正确的位置。
stackoverflow.com常见问题解答：“如果您的问题是关于网页设计和HTML/CSS布局，请询问“-1:不起作用，至少在Chrome和Firefox上不起作用。”。例如：现在试试，我忘记了p
标签。谢谢！改变数字的背景色怎么样？我希望数字有红色背景，文本没有任何背景。这可能吗？@misha:我不确定这是否可能，尽管这是一个很好的辩护理由。尽管你也可以去掉填充物和边距，然后在标签周围用一些其他div进行调整。
<!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>

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

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