为什么 ::before CSS 选择器在动态添加项目时不适用于列表项?

我有以下列表：

<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文件中。它不会发生在堆栈代码段中。

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

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

我已经设法通过使用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>

相关内容

最新更新

热门标签：