单击时同时更改两个脚注链接的背景颜色?

Question

我有脚注链接，我想在单击时更改两个链接的背景颜色。

<p id='text1'>Text1<sup><a href='#footnote1'>[1]</a></sup></p>
<ol>
<li><sup id='footnote1'><a href='#text1'>[1]</a></sup>Footnote1</li>
</ol>

这是我尝试过的，但它显然只更改了 ol 列表链接：

ol li sup a:active {background-color:yellow}

当单击任何链接时，如何同时更改 p 和 ol 链接的背景颜色，如果可能的话，仅使用纯 CSS？

Answer 1

不幸的是，<a>元素是透明的，因此不能有背景色。您要查找的是定位<sup>元素。不幸的是，由于 CSS 没有父选择器，因此无法根据原始 CSS 的<a>标记的条件来定位<sup>元素。

因此，您只有两个选择。

选项 1：重新构建 HTML，使<a>标记包含<sup>标记，而不是相反：

a sup {
background: green;
}
a:visited sup {
background: cyan;
}

<p id='text1'>
Text1
<a href='#footnote1'>
<sup>[1]</sup>
</a>
</p>
<ol>
<li>
<a href='#text1'>
<sup id='footnote1'>[1]</sup>
</a>Footnote1
</li>
</ol>

选项 2：使用 JavaScript：

var elements = document.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++) {
document.getElementsByTagName('a')[i].parentNode.style.backgroundColor = "cyan";
}

<p id='text1'>
Text1
<sup>
<a href='#footnote1'>[1]</a>
</sup>
</p>
<ol>
<li>
<sup id='footnote1'>
<a href='#text1'>[1]</a>
</sup>Footnote1
</li>
</ol>

希望这有帮助！ :)