如何在將活動類應用於其父李元素時覆蓋錨元素的字體顏色？

Question

我有一個導航欄有三個按鈕，我試圖通過使用jQuery對li元素應用「活動」類來激活它們 - 邊框和字體顏色應該改變。到目前爲止，只有邊框顏色發生變化，而文字保持不變。

此外，我想覆蓋或防止:hover僞類當鏈接處於活動狀態。

這裏是codepen這將有望使這個更清晰。 請問如何覆蓋a元素的字體顏色？

謝謝！

Answer 1

你有HTML看起來像

<ul class="topnav"> 

    <li class="topnavli"> 
     <a href="#fun-stop">Link 3</a>         
    </li> 

    ....... 

然後樣式錨

.topnav a { color: #fff; } 

那麼你活動類添加到LI元素，但風格只設置爲

.active { color: #FFADA0; } 

這只是對LI元素的樣式，而不是裏面的錨點和規格狀態s表示默認錨標籤不從父元素繼承般的色彩屬性，如果href屬性存在，以便在邊界上設置這些樣式必須直接設置上的東西錨狀

li.active a { color: #FFADA0; } 

Li元素，即應具有特定樣式爲元素，以便你最終

li.active { 
    border:3px solid #FFADA0; 
} 

li.active a { 
    color: #FFADA0;  
} 

Codepen

Answer 2

改變，添加

.topnav .active a { 
    color: #FFADA0 ;  
} 

$('.topnav li').click(function() { 
 
    $(".topnav li.active").removeClass("active");  
 
    $(this).addClass('active'); 
 
    });

.header h1 { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 44px; 
 
    letter-spacing: 3px;  
 
    margin: 0; 
 
    padding: 15px 0 15px 30px; 
 
    display: inline-block; 
 
    color: #fff; 
 
    } 
 

 
.topnav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
    font-family: 'Montserrat', sans-serif; 
 
    background-color: #000; 
 
    z-index: 1;   
 
    } 
 

 
.topnav li { 
 
    display: block; 
 
    float: right;   
 
    margin: 20px 8px 0 0; 
 
    } 
 

 

 
.topnavli { 
 
    border: 3px solid #fff; 
 
    } 
 

 
.topnav li:first-child { 
 
    margin-right: 50px; 
 
} 
 

 

 
.topnav li:hover { 
 
    border: 3px solid #6fb7b7; 
 
    transition: 0.3s; 
 
} 
 

 
.topnav .active a { 
 
    color: #FFADA0 ;  
 
} 
 
.topnav a { 
 
    display: block; 
 
    color: #fff ; 
 
    font-weight: 600; 
 
    padding: 10px 0 ; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-align: center; 
 
    text-decoration: none;  
 
    width: 120px; 
 
    } 
 

 
.topnav a:hover { 
 
    color: #6fb7b7; 
 
    text-decoration:none; 
 
    transition: 0.3s; 
 
} 
 

 
.active { 
 
    color: #FFADA0 ;  
 
    border:3px solid #FFADA0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="header">  
 
    <ul class="topnav"> 
 
     
 
     <li class="topnavli"> 
 
      <a href="#fun-stop">Link 3</a>         
 
     </li> 
 
     <li class="topnavli"><a href="#projects">Link 2</a></li> 
 
     <li class="topnavli"><a href="#home">Link 1</a></li> 
 
     
 
     <h1>website</h1>      
 
     </ul>  
 
    </div>