如何在active上同时调用两个标记：在css中进行更改

我有点小问题。正如我所说，我目前正在处理左侧菜单，并试图在css中的

：active

上同时调用两个标记

li

和

a

。我找了很多，但找不到任何适合我的东西。我想要的是在

：active

（当用户单击按钮时）上更改整行

li

和

a

的颜色

这是我的密码：

。子菜单li，
a:主动的{
颜色：#f1f1！重要；
背景色：#2e8fda！重要；
}

这是否提供了您想要的结果？我更改了一些CSS代码

HTML:

<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>

.sub-menu a {
  display: block;
}

a:active {
  color: #f1f1f1 !important;
  background-color: #2e8fda !important;
}

---

这是你想要的结果吗？我更改了一些CSS代码

HTML:

<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>

.sub-menu a {
  display: block;
}

a:active {
  color: #f1f1f1 !important;
  background-color: #2e8fda !important;
}

希望这有帮助。 **

a:悬停#b ** 这使得悬停a和b可以改变。 不要悬停，而是根据需要使用“活动”。 如果这不起作用，那就试试看

a:悬停+#b 或

a:悬停#b 在最新版本的chrome上，这对我来说总是有效的。希望这对我有所帮助。 **

a:悬停#b ** 这使得悬停a和b可以改变。 不要悬停，而是根据需要使用“活动”。 如果这不起作用，那就试试看

a:悬停+#b 或

a:悬停#b

---

这在最新版本的chrome上始终适用。在包含父列表项元素上声明您的

：active

伪状态规则，然后只允许嵌套的锚标记继承父列表项的样式

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

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

。子菜单li：激活{
颜色：#f1f1！重要；
背景色：#2e8fda！重要；
}
.子菜单LIA{
颜色：继承；
}

在包含父列表项元素上声明您的

：活动的

伪状态规则，然后只允许嵌套的锚标记继承父列表项的样式

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

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

。子菜单li：激活{
颜色：#f1f1！重要；
背景色：#2e8fda！重要；
}
.子菜单LIA{
颜色：继承；
}

您的代码工作正常，它会更改所有标记。您必须解释您想要实现的目标。它不起作用，因为我想将标记a的文本颜色更改为白色，无论我单击a还是li。您可以将子菜单li更改为

。菜单内容li:active

。那么标记a呢@拉西兰它的颜色也变了？？我看到的另一件事是，我只能点击单词，但我想点击整行。你的代码运行良好，它改变了所有标记。您必须解释您想要实现的目标。它不起作用，因为我想将标记a的文本颜色更改为白色，无论我单击a还是li。您可以将子菜单li更改为

。菜单内容li:active

。那么标记a呢@拉西兰它的颜色也变了？？我看到的另一件事是，我只能点击单词，但我想点击整行。谢谢。继承意味着它将在调用时自动运行？？？如何在css中包含多个类，以及如果我在单独的I标记中的标记左侧有字体，并且我想在活动时将其颜色更改为黑色而不是白色，该怎么办？\谢谢。继承意味着它将在调用时自动运行？？？如何在css中包含多个类，以及如果我在单独的I标记的左侧有字体，并且我想在活动时将其颜色更改为黑色而不是白色，该怎么办\