Question

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添加到没有nav-link类的active中。

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

谢谢！

Answer 1

    remove active class from a tag and give it to li and give all css properties in li tag and make a tag display:block; and don't give padding into li but give it to a.

    

 <style>
         li{
           background-color:#fff;
         }
        li a{
           color:#000;
        }
        li.active {
          background-color: #000;
        }
    
        li.active a {
          color: #fff;
          padding: 15px;
        }
    </style>
    
    
        <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>

Answer 2

使用css选择器:not()。这将为nav-link类的每个元素设置样式，除了active类的元素

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

不要将CSS添加到具有活动类的链接中

2 个答案: