html - 在 HTML/CSS 中单击时如何删除目标中的样式

Question

我有一个示例代码，当我单击指定的超链接时，它会尝试为目标着色。

我正在制作一些元素，并且在这个元素上具有相同的功能。当我单击目标时，我希望为已链接的元素着色，并且在代码中它正在工作，但是当我再次单击屏幕中的其他任何位置时，我想删除目标的颜色。

p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>
<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the link above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links above. Isn't that delightful?
</p>

我想在单击屏幕中的任意位置时删除目标的颜色。我该怎么做？

Answer 1

您可能需要一点 JavaScript:

// Get the target element that you want to remove the color from
const target = document.querySelector('#my-target');

// Add a click event listener to the entire document
document.addEventListener('click', () => {
    // When the document is clicked, remove the color from the target element
    target.style.color = '';
});