html - 如何在已设置为另一种颜色的情况下更改列表中 anchor 标记的颜色以使其处于事件状态？

Question

我已经在 CSS 文件中将列表中 anchor 标记的文本颜色设置为黑色。现在我想将一个列表项声明为事件的并更改其文本颜色，但它不起作用。请帮助!

这是预设颜色:

#already-set li a
{
    font: normal 14px Arial;
    border-top: 1px solid #ccc;
    display: block;

    color: black;

    text-decoration: none;
    line-height:26px;
    padding-left:5px;            
}

下面是更改事件列表项颜色的代码:

a#active
{
    background-color: #d11250;

    color: white;

    font-weight:bold;   
}

这是我的 HTML:

<ul id="already-set">                               
  <li><a href="#" id="active"> List Item </a></li>
</ul>

Answer 1

您对 a:active 感到困惑。

请检查这个 EXAMPLE 这将使它更清楚一点。我添加了 jQuery 以在单击时即时更改事件元素。

$(function() {
  $("a").click(function() {
    // remove classes from all
    $("a").removeClass("active");
    // add class to the one we clicked
    $(this).addClass("active");
  });
});

#already-set li a {
  font: normal 14px Arial;
  border-top: 1px solid #ccc;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 26px;
  padding-left: 5px;
}

a.active {
  background-color: #d11250;
  color: white;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="already-set">
  <li><a href="#"> List Item 1</a>
  </li>
  <li><a href="#" class="active"> List Item 2</a>
  </li>
  <li><a href="#"> List Item 3</a>
  </li>
</ul>

由于列表中的 css，文本颜色保持黑色。如果您想将所选元素中的文本颜色更改为白色，请进行以下更改作为 EXAMPLE 2

将 a.active 更改为 #already-set li a.active。