CSS选择器排除某些元素的子元素

Question

我的CSS选择器有一些麻烦。我们的目标是用一些自定义样式来样式锚定<a>标记，但是如果它包含一个图标，就不要管它。在下面的示例中，图标将是<span>标记。

我已经尝试了很多事情与:not()选择器，但没有运气。下面是我目前得到的显示问题的内容:

a {
color: red;
}
a span {
color: unset;
}

<a href="#">styled</a>
<br>
<a href="#"><span>not styled</span></a>

这里的问题是，首先<a>标签是有样式的，然后只有<a><span>标签是无样式的。因为在选择器中span是最后一个，这将是样式应用的地方，而不是父<a>元素。

我们也不能在第一部分中使用像a *这样的选择器，因为在HTML中有一个没有子节点的锚。*将只匹配<a>标记和任何子标记，而不是空标记。

也许有一些方法或技巧只匹配当元素有一个<span>标签，但随后将样式应用到<a>标签。对我来说，另一个有效的解决方案是匹配一个没有子的空<a>标签，因为这将不包括<a><span>标签。我认为:empty选择器可能会有所帮助，但似乎这只是匹配，如果它根本没有内容，但在这个例子中，<a>标签确实有内容，只是没有子元素。

注意:更改HTML实际上不是一个选项，因为这来自使用所见即所得编辑器的用户输入。我将不得不编写一个函数来重写HTML的某些部分，这是不可取的。

我不确定这是否可能在CSS中，但它似乎是这样一个简单的例子。如果有人能帮我，那就太好了。由于

Answer 1

你可以用JavaScript

JavaScript

for (x of document.getElementsByTagName("a")) {
if (x.children[0] != undefined) {
if (x.children[0].tagName=="SPAN" || x.children[0].tagName=="span") {
x.style.color="unset";
}
}
}