为什么动态添加项目时:: :: CSS Selector之前为什么不能与列表项目一起使用？

Question

我有以下列表：

<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>

[使用以下CSS（摘自https://www.w3schools.com/howto/howto_css_bullet_color.asp）：

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
}

将默认列表标记更改为红色标记。一切正常，但是当我使用

通过JavaScript将新项目添加到列表中时

var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );

实时示例：

var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
}

<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>

该项目已正确添加到列表中，但完全没有标记。另外，当我在检查器中检查新项目时，它根本不显示“ :: before”元素。

有人可以解释我为什么吗？

Answer 1

我已经设法通过使用

XHTML文件来复制您的问题。

问题是XHTML是

区分大小写，li！= LI。更改添加元素的代码以使用li：

var listItem = document.createElement("li");