Question

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

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

See the list on the right hand side of this page

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

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

我更喜欢只使用CSS，但是嘿。

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

感谢您查看我的问题！

Answer 1

修订答案： jsFiddle Pure CSS Solution

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

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

enter image description here

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

简单示例： jsFiddle CSS Counter

enter image description here

<强> 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计数器的更多信息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;
}

<强>结果：
enter image description here

额外：此变体示例强调数字：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/

Answer 3

只用css很容易实现：

#secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

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

你可能不得不根据你的css来调整它，但原则是：

将您想要“数字”的颜色应用于<ol>
将文字颜色应用于<li>标记

至于你的问题的其余部分，将<ol>包装在容器div中并将所需的背景应用于它。

Answer 4

关于问题＃1：看来你已经对它们进行了不同的着色？（如果您仍需要解决方案，我可以编辑此答案）

对于＃2：

ul#idname li {
   background:#ddd;/*whatever colour*/
}

其中idname是<ul>

的ID

Answer 5

对于那些只需要背景图像的人来说，这里只有一个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

See codepen

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

5 个答案: