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

使用Javascript，我想更改有序HTML列表中数字的背景颜色。列表内容的背景色不应更改。

---

如何实现这一点？

基于以下文章：，如果您有类似的HTML代码：

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

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

可能会让你得到你想要的东西：以下是我得到的结果（仅使用Firefox测试）：

（来源：）

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

在评论后编辑：oops，未看到该部分；对不起:-(

现在您已经有了一个有序的列表，使用特定的颜色作为数字的背景，您可以插入一些Javascript代码来更改该颜色

考虑到我在这里使用的

标记是

id=“list”

，您可以使用JS代码的以下部分更改其背景颜色：

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

执行此操作后，您将得到如下结果：

---

（来源：）

以上答案很好。但您可以用其他方式创建它

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

/*================CSS===========*/
.问题{
列表样式位置：内部；
页边顶部：1px；
填充：0px 5px；
背景：#e7e2da；
}
.问题李a{
填充：10px；
显示：块；
}

仅使用HTML和CSS的

ol

和

ul

解决方案

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>

---

@米莎：哦，对不起，我错过了问题的那一部分：-（；；我编辑了我的答案，添加了一些关于这个的信息。

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>