将CSS应用于有序列表-数字下的背景色？

我有一个有序列表，我用两种方式设计了它：

数字的颜色与列表文本的颜色不同

为每个列表项应用背景色和边框

首先将橙色样式应用于

，然后仅使用jQuery将黑色样式应用于列表文本，使数字变成橙色：

jQuery（'#secondary ol li'）.wrapInner（''）

我宁愿只使用CSS，但是嘿

因此，剩下的问题是如何扩展数字下的背景色/边框

谢谢你检查我的问题
 仅使用css即可轻松实现：

#secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

#辅助ol{
颜色：；
}
#中学里{
颜色：；
}

用正确的颜色代码替换占位符

根据您的css，您可能需要对其进行处理，但原则是：


在

将文本颜色应用于
标记

至于问题的其余部分，请将
包装在容器div中，并应用所需的背景。
至于问题1：
看起来你已经把它们涂成不同的颜色了？（如果您仍然需要解决方案，我可以编辑此答案）

对于#2：

对于第二个问题，
idname
是该
的id，一种可能是将
列表样式位置
更改为
li
标签的内部：

li { list-style-position: inside; }

这将移动与文本其余部分内联的数字，并允许您一起设置样式。但是，这会阻止文本单独对齐

对于第一个问题，理论上可以使用伪元素
标记
分别设置数字样式，如下所示：

li::marker { color: orange; }

但是，我认为目前任何浏览器都不支持这种功能。您可以使用特定于mozilla的
：-moz列表编号
，但这在其他浏览器中显然不起作用

您可以在我的示例中看到所有这些位：
修改后的答案：

这里有一个修改后的方法，它没有使用OP的原始jQuery框架，这是一个在我之前的回答中没有实现的请求。该方法使用现有jQuery为
li
元素应用span包装，因为直接修改HTML是不可能的

这个新方法使用CSS伪选择器
：before
和
：after
以及CSS 2.1
counter
函数，可以将其数字列表样式化，因此不需要jQuery包装器。事实上，jsFiddle版本使用Google@font-face字体显示数字


CSS计数器函数的使用是通过声明要在
ul
元素中使用的变量名来完成的，然后在
：before
元素中递增计数器，并将其用作实际内容

简单示例：


HTML:

<ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

有关CSS计数器的详细信息。



我在OP问题中使用现有框架的原始日期答案如下所示


我仔细看了你的问题，然后看了你的网页

以下是您需要的解决方案：

总而言之，以下是使其工作的替代CSS规则：

#secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

结果：



额外：此变体示例强调数字：
对于那些像我一样只需要背景图像的人，有一个css唯一的解决方案：

ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1

您想设计什么数字？抱歉，不清楚！右边列表中的数字。将编辑我的问题。谢谢。“所以剩下的问题是如何扩展数字下的背景色/边框。”你似乎误读了这个问题。谢谢luca，但这会将数字更改为黑色（如果有区别的话，我使用FF）。我在上面的问题中使用jQuery解决了这个问题，所以现在我的重点是让背景颜色延伸到数字下……我的错，我修改了我的答案来回答这个问题谢谢Luca！但是#二级李也会影响数字。此外，无论我将颜色应用于ol还是li，它都不会延伸到数字下。也许这与我的CSS有关？我使用Eric Meyer的reset.css，然后将左边距：20px应用于ol。此外，如果您想扩展/减小彩色背景的大小，请编辑填充。感谢peopje，我意识到我的问题具有误导性。我已经设法用jQuery给数字上色（试过你的CSS，但没用），所以现在我的重点是让背景颜色延伸到数字下面？不适合我。对不起，如果我不清楚。。。我想把灰色的延伸到数字下面。谢谢约翰。是的，
list-style-position:inside
会将数字移动到背景/边框内，尽管我一直希望列表文本作为块对齐。嗯…谢谢arttronics！我几乎已经放弃了！
ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1