將CSS應用到有序列表 - 數字下的背景顏色？

Question

我有我在兩個方面有風格的有序列表：彩色的數字不同，以應用背景顏色和邊框每個列表項

See the list on the right hand side of this page

列表文本

1. 將橙色樣式應用於<li>，然後僅使用jQuery將黑色樣式應用於列表文本，將數字設置爲橙色：

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

   我寧願只使用CSS，但嘿。

   所以剩下的問題是如何在數字下擴展背景顏色/邊框。

   感謝您檢查我的問題！

Answer 1

修訂答：jsFiddle Pure CSS Solution

這裏是一個修改後的方法是不使用OP的原jQuery框架，這不是一個請求在我以前的答案中得到滿足。該方法使用現有的jQuery爲li元素應用span span wrapper，因爲直接的HTML修改是不可能的。

這種新方法使用CSS僞選擇:before和:after與CSS一起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計數器的更多信息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

Answer 2

很容易實現僅適用於CSS：

#secondary ol { 
color: <orange>; 
} 

#secondary li { 
color: <black>; 
} 

使用正確的顏色代碼替換佔位符！

你可能有它取決於你的CSS但原則是撥弄：

• 應用所需的「數字」出現喜歡的顏色，到<ol>
• 申請文本的顏色<li>標籤

至於你的問題的其餘部分，將<ol>包裝在一個容器div中，並將所需的背景應用到它。

Answer 3

至於問題1： 看來你已經爲它們着色了不同？ （如果你仍然需要的解決方案，我可以編輯這個答案）

對於＃2：

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

其中idname是那<ul>

Answer 4

關於第二個問題的ID，一個可能性是到list-style-position改爲內爲您li標籤：

li { list-style-position: inside; } 

這將移動與數T直列他將文本的其餘部分放在一起，讓你將它們整合在一起。但是，這確實會停止單獨對齊文本。

關於第一個問題，有可能在理論上使用僞元素像這樣單獨樣式的數字：

li::marker { color: orange; } 

不過，我認爲這是目前沒有在任何瀏覽器的支持。您可以使用mozilla特定的::-moz-list-number，但這在其他瀏覽器中顯然不起作用。

你可以看到在我的例子這裏所有這些位：http://jsfiddle.net/XmtxL/

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