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

（我在回答的开头链接到的文章有更多解释）

评论后编辑： ooops，没看到那部分;抱歉： - （

既然你有一个有序的列表，并且有一个特定的颜色作为数字的背景，你可以插入一些Javascript代码来改变那种颜色。

考虑到我在<ol>使用的id="list"标记，您可以使用以下JS代码部分更改其背景颜色：

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

执行此操作后，您将获得如下所示的内容：

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

Answer 2

ol和ul的解决方案仅使用HTML和CSS。

ul的解决方案

ul {
    list-style: none;
    display: block;
    padding: 0;
}

ul li::before {
  content: "• ";
  background-color: red;
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>

使用counter-increment的ol解决方案

ol {
    list-style: none;
    display: block;
    padding: 0;
    counter-reset: my-counter;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
  background-color: red;
}

<ol>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ol>

Answer 3

以上回答很好。但你可以用其他方式创造它......

<!--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;  
}

如何更改有序列表中数字的背景颜色？

3 个答案: