css - 如何使用css更改Bootstrap tablist中活动元素的li标签的背景颜色

Question

我想更改css中下拉菜单项的活动列表项的背景颜色。

我尝试使用 .nav-item > a:active 访问父级，这不起作用我该怎么做？

html

<ul class="nav" role="tablist" #myDiv id="navdrop">
                  <!-- <li class="nav-item">
                     <a class="nav-link active" href="#all" role="tab" data-toggle="tab" onclick="addprevtext()">All</a>
                  </li> -->
                  <li class="nav-item ">
                     <a class="nav-link " href="#social" role="tab" data-toggle="tab" onclick="addprevtext()">HR</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#digital" role="tab" data-toggle="tab"
                        onclick="addprevtext()">Marketing
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#crm" role="tab" data-toggle="tab" onclick="changetext()">Customer Service</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#ticketing" role="tab" data-toggle="tab"
                        onclick="changetext()">Operations</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#coreSystem" role="tab" data-toggle="tab" onclick="changetext()">Insurance</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#dms" role="tab" data-toggle="tab" onclick="changetext()">Financial Services</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#manu" role="tab" data-toggle="tab" onclick="changetext()">Manufacturing
                           </a>
                     </li>
                     <li class="nav-item">
                           <a class="nav-link" href="#health" role="tab" data-toggle="tab" onclick="changetext()">Healthcare & Pharma

                              </a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="#it" role="tab" data-toggle="tab" onclick="changetext()">IT

                                 </a>
                           </li>

               </ul>
<div class="tab-content">
                  <div role="tabpanel" class="tab-pane in active show" id="social">
                     <div class="row existing_connections">
                           <div class="list-type1">
                                 <ul class="list-inline">
                                 <li><a href="#"></a></li>
                                 <li ><a href="#"></a></li>
                                 <li ><a href="#"></a></li>
                                 <li ><a href="#"></a></li>
                                 <li ><a href="#"> </a></li>
                                 <li><a href="#"> </a></li>
                                 <li><a href="#">/a></li>

                                 </ul>
                                 </div>

                                 <button class="btn btn-primary lead"></button>

css

.nav-item > a:active {
        background: #003097;
    } 

选定的 li 项目的背景颜色应在其处于活动状态时更改。

标签： css

Answer 1

.nav-item a:active {
    background:#003097; 
} 

为我工作，除非你打算采取另一种行为