一個樣式選擇一個特定的類

我試圖找出如何寫一個風格以下中同時指定懸停，主動：一個樣式選擇一個特定的類

我只想風格：懸停和：活躍錨.menu內的標籤，而不是.menu-switch。以下似乎是工作，但無論如何，我可以加入他們的風格？

/*Apply the following styles to anchor tags within any ul within #main-nav*/ 
 
#main-nav ul li 
 
a:link, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
} 
 
/*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav .menu a:active { 
 
    background-color: #ccc; 
 
} 
 

 
#main-nav .menu a:hover { 
 
    background-color: #ccc; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
     <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
     <li><a href="#">Menu item 1</a></li> 
 
     <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-07-25 Blake Rivell

您的代碼實際上有一個其他問題：第一套的CSS規則沒有被正確分類。您需要重複列表中每個選擇器的#main-nav ul li部分;否則，規則將應用於文檔中的其他鏈接，而不僅僅是#main-nav ul li中的鏈接。

同樣，要將最後兩條規則分組，您需要將其選擇器整體分組。

此外，如果你不知道的話，你可能想follow the LoVe-HAte mnemonic in arranging your link pseudo-classes，除非你有一個很好的理由來排序:visited:hover和:active（後我也採取了安排你的最後兩個選擇時間相同的順序）。

/*Apply the following styles to anchor tags within any ul within #main-nav*/ 
 
#main-nav ul li a:link, 
 
#main-nav ul li a:visited, 
 
#main-nav ul li a:hover, 
 
#main-nav ul li a:active { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
} 
 
/*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav .menu a:hover, 
 
#main-nav .menu a:active { 
 
    background-color: #ccc; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
     <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
     <li><a href="#">Menu item 1</a></li> 
 
     <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-07-25 05:15:02 BoltClock

-1

#main-nav ul li a:link, 
 
#main-nav ul li a:hover, 
 
#main-nav ul li a:active, 
 
#main-nav ul li a:visited { 
 
    color: #000; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    display: block; 
 
    border-radius: 4px; 
 
    border: 1px solid orange; 
 
} 
 
    /*Apply the following styles to anchor tags within .menu only within #main-nav*/ 
 
#main-nav ul a:active { 
 
    background-color: #ccc; 
 
    color: #fff; 
 
} 
 

 
#main-nav ul a:hover { 
 
    background-color: #ccc; 
 
    color: #fff; 
 
}

<div id="main-nav"> 
 
    <ul class="menu-switch"> 
 
    <li><a class="js-menu-toggle" href="#">OPEN ME</a></li> 
 
    </ul> 
 
    <ul class="menu"> 
 
    <li><a href="#">Menu item 1</a></li> 
 
    <li><a href="#">Menu item 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-07-25 04:47:12

一個樣式選擇一個特定的類

回答

相關問題