CSSを使用して異なるページのメニューカラーを変更する

Question

メニューのテキストの色を変更して、代替ページで異なるようにしたい。私は次のCSSを使用して、メニューのテキストの色、ホバーの色、および現在のメニュー項目の色を変更しています。これらは単独で動作しますが、同じCSSスクリプトで動作する場合は動作しません。 CSSコードは、他のものを実行せずにこれらの両方を行うためのものですか？

//私は、メニューのテキストの色

.page-id-11 .sf-menu > li > a, .page-id-11 .sf-vertical > li > a { 
    color: grey; 
} 

//ホバー色と現在のメニュー項目の色

.page-id-11 .sf-menu > li > a:hover, .page-id-11 .sf-menu > li.current- 
menu-item > a, .page-id-11 .sf-menu > li.current-menu-ancestor > a, 
.page-id-11 .sf-vertical > li > a:hover, .sf-vertical > li.current- 
menu-item > a, .page-id-11 .sf-vertical > li.current-menu-ancestor > a 
{ 
    color: red; 
} 

Answer 1

.page-id-11 .sf-menu > ul > li > a:hover{ 
 
    color: red; 
 
} 
 

 
.page-id-11 .sf-menu > ul > li > a, .page-id-11 .sf-vertical > li > a { 
 
    color: grey; 
 
}

<div class="page-id-11"> 
 
    <div class="sf-menu"> 
 
    <ul> 
 
     <li> 
 
     <a>Link</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

を変更する変更あなたのコードはの周りにが必要です。その場合、>セレクタは<ul>の内部に「隠されている」ため、<li>タグを認識しません。がであり、コンテナの内部に直接入れ子になっていないため、参照するにはthisをチェックしてください。 。

ulをCSSスタイルに入力すると、それらは機能します。