代码之家 › 专栏 › 技术社区 › JAT86

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

footnotes hyperlink css html

0

JAT86 · 技术社区 · 7 年前

我有脚注链接,我想改变点击时两个链接的背景色。

<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 li sup a:active {background-color:yellow}

如果可能的话,我如何在点击任何链接时同时更改p和ol链接的背景色?

1 回复 | 直到 7 年前

1

0

Obsidian Age 7 年前

不幸的是 <a> transparent ,因此, 不能 <sup> 不可能 以 < 基于条件的元素 <a> 使用原始CSS标记,正如CSS所做的那样 no parent selector

因此,您只有两个选择。

<a> 标签包括 < 标记,而不是相反:

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>