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

我有一个有序的列表,我有两种方式：

>将数字与列表文本的颜色不同
>为每个列表项应用背景颜色和边框

See the list on the right hand side of this page

首先将橙色样式应用于< li>,然后仅使用jQuery将黑色样式应用于列表文本,将数字设为橙色：

jQuery(‘#secondary ol li’).wrapInner(‘< span class =“notes”>< / span>‘);

我更喜欢只使用CSS,但是嘿.

所以剩下的问题是如何在数字下扩展背景颜色/边框.

谢谢你查看我的问题！

最佳答案

修订回答：jsFiddle Pure CSS Solution

这是一个修改后的方法,不使用OP的原始jQuery框架,这个请求在我之前的回答中没有实现.该方法使用现有的jQuery为li元素应用span包装器,因为无法直接进行HTML修改.

这个新方法使用CSS Pseudo选择器：before和：after以及CSS 2.1计数器函数,它可以将它的数字列表设置为风格化,这样就不需要jQuery包装器.实际上,jsfiddle修订版使用Google @ font-face字体显示数字.

使用CSS计数器功能是通过声明要在ul元素中使用的变量名称,然后在：before元素中递增计数器以及将其用作实际内容来完成的.

简单示例：jsFiddle CSS Counter

HTML：


CSS：

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计数器HERE的更多信息.
我在OP问题中使用现有框架的原始日期答案如下所示.
我仔细查看了你的问题,然后查看了你的网页.
这是您需要的解决方案：
jsFiddle
总而言之,这是使其工作的替代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;
}

结果：
额外：此变体示例强调数字：jsFiddle

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

相关文章