不要将css添加到带有活动类的链接中[重复]

Posted 2023-03-06

【中文标题】不要将css添加到带有活动类的链接中[重复]

【英文标题】：Don't add the css to the link with the active class [duplicate]

【发布时间】：2019-12-25 14:02:42

【问题描述】：

有没有办法在 CSS 中不将 css 添加到 li 中？

这是我的示例 html

<li class="nav-item">
    <a class="nav-link active" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
        <i class="la la-lg la-cube"></i> <div><small>Components</small></div>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
        <i class="la la-lg la-image"></i> <div><small>Templates</small></div>
    </a>
</li>

所以在我的li 的链接中，我只想将css 添加到没有active 类的nav-link。

如何在纯 css 中做到这一点？

谢谢！

【问题讨论】：

解决此问题的常用方法是将样式应用于所有项目，然后为active 类覆盖它（将其恢复为原始样式）

【参考方案1】：

从标签中删除活动类并将其提供给<li>，并在<li>标签中提供所有CSS属性并制作标签display:block;，不要在<li>中添加填充，而是将其提供给@ 987654326@.

li
   background-color:#fff;

li a
   color:#000;

li.active 
  background-color: #000;


li.active a 
  color: #fff;
  padding: 15px;

<li class="nav-item active">
  <a class="nav-link" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
    <i class="la la-lg la-cube"></i>
    <div><small>Components</small></div>
  </a>
</li>
<li class="nav-item">
  <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
    <i class="la la-lg la-image"></i>
    <div><small>Templates</small></div>
  </a>
</li>

【参考方案2】：

使用 css 选择器:not()。除了 active 类之外的每个元素都使用 nav-link 类设置样式

.nav-item .nav-link:not(.active)
/* your styles */

.nav-item .nav-link:not(.active)
color: red;

<li class="nav-item">
    <a class="nav-link active" id="components-tab" data-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
        <i class="la la-lg la-cube"></i> <div><small>Components</small></div>
    </a>
</li>
<li class="nav-item">
    <a class="nav-link" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false">
        <i class="la la-lg la-image"></i> <div><small>Templates</small></div>
    </a>
</li>