css - 如何在事件 : to make changes in css 上同时调用两个标签

Question

我遇到了一个小问题。因为，我目前正在处理左侧菜单，并试图调用这两个标签 li和 a同时在:active在 CSS 中。我搜索了很多但无法为我工作。我想要的是改变整行的颜色 li和 a在 :active (当用户点击按钮时)。

这是我的代码:

.sub-menu li,
a:active {
  color: #f1f1f1 !important;
  background-color: #2e8fda !important;
}

<div class="menu-list">
  <ul id="menu-content" class="menu-content collapse out">
    <li data-toggle="collapse" class="collapsed">
      <a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
    </span></a>
      <ul class="sub-menu collapse" id="a">
        <li><a href="#">check1</a></li>
        <li><a href="#">check2</a></li>
        <li><a href="#">check3</a></li>
        <li><a href="#">check4</a></li>
      </ul>
    </li>

    <li>
      <a href="#">
        <i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
      </a>
    </li>
  </ul>
  <span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>

</div>

Answer 1

在包含的父列表项元素上声明您的 :active 伪状态 规则，然后只允许您的嵌套 anchor 标记继承父级的样式。

.sub-menu li:active {
  color: #f1f1f1 !important;
  background-color: #2e8fda !important;
}

.sub-menu li a {
  color: inherit;
}

.sub-menu li:active {
  color: #f1f1f1 !important;
  background-color: #2e8fda !important;
}

.sub-menu li a {
  color: inherit;
}

<div class="menu-list">
  <ul id="menu-content" class="menu-content collapse out">
    <li data-toggle="collapse" class="collapsed">
      <a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
    </span></a>
      <ul class="sub-menu collapse" id="a">
        <li><a href="#">check1</a></li>
        <li><a href="#">check2</a></li>
        <li><a href="#">check3</a></li>
        <li><a href="#">check4</a></li>
      </ul>
    </li>

    <li>
      <a href="#">
        <i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
      </a>
    </li>

    <li>
      <a href="#">
        <i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
      </a>
    </li>
  </ul>
  <span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>

</div>