动态更改 a:before CSS 标记

Question

我在动态更改 .tracking-list li a：before css 中的背景字段时遇到了一些麻烦，因为我正在循环访问的每个 a。

例如，我能够将下面的背景更改为"红色"和名称，但我不确定如何在 .tracking-list li a：before中更改特定字段"背景"。

关于如何动态更改它的任何建议？非常感谢！

风格.css

.tracking-list li a:before {
content: "";
background: url("../images/bitmap.svg") no-repeat;
display: inline-block;
width: 22px;
height: 20px;
margin-right: 4px;
vertical-align: middle;
}

.JS

//Loop Through Names
var ul = document.getElementById(category);
for (var i = 0; i < data.data.length; i++) {
let record = data.data[i];
let tech_name = record.name;
let logo_image = record.logo;
var listItem = document.createElement("a");
listItem.textContent = tech_name;
listItem.style.background = "red";
ul.appendChild(listItem);
}

Answer 1

不能定位具有内联样式的伪类。

如果要更改它们，则需要：

• 修改样式表
• 首先更改导致规则应用于伪类的条件

后者通常是最简单的方法。

document
.querySelector("button")
.addEventListener("click", changeMiddleLink);

function changeMiddleLink() {
document.querySelector("li:nth-child(2) a").classList.add("changed")
}

.tracking-list li a::before {
content: "";
background: green;
display: inline-block;
width: 22px;
height: 20px;
margin-right: 4px;
vertical-align: middle;
}
.tracking-list li a.changed::before {
background: red;
}

<ul class="tracking-list">
<li>
<a href="http://example.com/">Test</a>
</li>
<li>
<a href="http://example.com/">Test</a>
</li>
<li>
<a href="http://example.com/">Test</a>
</li>
</ul>
<button type="button">Click me</button>