当动态添加项目时，为什么 ::before CSS 选择器不适用于列表项目？答案

【问题标题】：Why does ::before CSS Selector not work with list items when a item is added dynamically?当动态添加项目时，为什么 ::before CSS 选择器不适用于列表项目？
【发布时间】：2020-02-13 18:29:35
【问题描述】：

我有以下列表：

<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 );

它发生在我的 XHTML 文件中。它不会发生在 Stack Snippet 中。

该项目已正确添加到列表中，但根本没有标记。此外，当我在 Inspector 中检查新项目时，它根本没有显示 "::before" 元素。

谁能解释一下为什么？

【问题讨论】：

在我这边工作 - jsfiddle.net/luispa/r89yq3jd/1
我不能reproduce这个问题..？
I cannot replicate your issue. 你介意在问题中创建一个 stack-sn-p 来证明你的问题吗？
@LuísP.A.等。人。 - 它发生在 XHTML 中，而不是 HTML。
@ Maffe - 如果您使用 XHTML，我怀疑您是，请更新问题以说明这一点。（不要误会，原本没想过这样做是可以理解的；只是事实证明它是相关的，所以在文本中添加标签和注释将对未来的访问者有所帮助。）

标签： javascript css css-selectors xhtml html-lists

【解决方案1】：

我已经设法通过使用 XHTML 文件复制了您的问题。

问题在于 XHTML 区分大小写，li != LI。更改添加元素的代码以使用li：

var listItem = document.createElement("li");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

这里有一个完整的 XHTML 文件来演示这个问题。如果您想在本地验证它，请务必使用正确的 Content-Type 提供文件（使用扩展名 .xhtml 并从文件系统打开它也可以，至少在 Chrome 及其变体中）：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML CSS Problem</title>
<style>
ul {
    list-style: none;
}

ul li::before {
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
}
</style>
</head>
<body>
<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>
<script>
var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );
</script>
</body>
</html>

【讨论】：