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

Question

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

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

请参阅本页右侧的列表

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

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

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

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

谢谢你查看我的问题!

Answer 1

修订答案: jsFiddle Pure CSS解决方案

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

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

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

简单示例: jsFiddle CSS Counter

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>

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柜台这里.

我在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

Answer 2

对于第二个问题，一种可能性是将标签更改list-style-position为内部li：

li { list-style-position: inside; }

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

对于你的第一个问题，理论上可以使用伪元素单独设置数字样式，marker如下所示：

li::marker { color: orange; }

但是，我认为目前任何浏览器都不支持此功能。您可以使用特定于 mozilla 的浏览器::-moz-list-number，但这显然不适用于其他浏览器。

您可以在我的示例中看到所有这些位： http: //jsfiddle.net/XmtxL/