如何更改有序列表中數字的背景顏色？

Question

使用Javascript，我想改變在一個有序的HTML列表中的數字的背景顏色。列表內容的背景顏色不應改變。 我該如何做到這一點？

Answer 1

主要基於以下文章：Style Ordered List with CSS，如果你有一些HTML代碼：

<ol id="list"> 
    <li> 
    <p>this is some text</p> 
    </li> 
    <li> 
    <p>and some other text</p> 
    </li> 
</ol> 

然後，使用一個CSS，看起來像這樣：

ol { 
    background: red; 
} 
li { 
    background: white; 
} 
p { 
    margin: 0px; 
} 

魔法門讓你得到像你所要求的東西：這裏是我得到的結果（僅用於Firefox測試）：

http://extern.pascal-martin.fr/so/screenshot-question-2650667.png

（上有我掛在我的答案開頭的文章解釋）的評論後

編輯：哎呀，沒看到那部分;抱歉:-(

現在你已經有序列表，具有特定的顏色作爲背景的數字，你可以插入一些JavaScript代碼，更改顏色。

考慮到<ol>標籤我這裏作爲id="list"，你可以改變它的背景色用的JS代碼如下部分：

document.getElementById('list').style.backgroundColor = 'blue'; 

這是執行完畢後，你會得到的東西看起來像下面這樣：

http://extern.pascal-martin.fr/so/screenshot-question-2650667-2.png

Answer 2

以上回答很好。但是你可以創建其他的方式...

<!--HTML--> 

<ol class="questions"> 
     <li><a href="#">What is your biggest fear about marriage?</a></li> 
     <li><a href="#">If your friends were asked to describe you in one word what would ...</a></li> 
     <li><a href="#">Are you closer to your family or your friends and why?</a></li> 
     <li><a href="#">What is the role of a wife?</a></li> 
     <li><a href="#">What is the role of a husband?</a></li> 
</ol> 


/*==============CSS===========*/ 
.questions li{ 
    list-style-position:inside; 
    margin-top:1px; 
    padding:0px 5px; 
    background:#e7e2da; 
} 
.questions li a{ 
    padding:10px; 
    display:block; 
}