我有一个有序的列表,我有两种方式：
>将数字与列表文本的颜色不同
>为每个列表项应用背景颜色和边框
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问题中使用现有框架的原始日期答案如下所示.
我仔细查看了你的问题,然后查看了你的网页.
总而言之,这是使其工作的替代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
