マウスを上に移動したときのリンクと文字の色について_html/css_WEB-ITnose

最初の効果は写真の通りです。

CSS:
width:70px;
z-index:1;
margin-right:10px;
#nav li a{
color:#d0f6d1;
font-weight:bolder;
height:10px;
display:table-cell;
font-family:"黑体";
line-height:110%
#nav li a:hover{
背景:url(nav_a_bg.png) 中央の繰り返しなし:#329a07;
}
a.this{
color:#329a07;
center no-repeat;

HTML は単に li と a

< ="#" class="this">ホームページ
ホーム

会社概要
;/a>

現在、メインの class="this" は現在いる列です。
色が反映されない理由はわかりませんが、背景画像には問題ありません。
マウスを列の上に移動すると、単語が緑色に変わります。本来はこの色が有効になり、単語も緑色になるはずです。
混乱を解消してくれるように神にお願いしてください。


ディスカッションへの返信(解決策)

CSSにはカバレッジ順序があり、この中のaは#nav li aでカバーされます。次のように、このスタイルで色の優先度を上げてください。

  a.this        {            background: url(nav_a_bg.png) center no-repeat;            color: #329a07 !important        }

上記の #nav li a は a.this よりも具体的であるため、優先してください
a.this{
color:#329a07;
background:url(nav_a_bg.png) center no-repeat
} #nav li a.this {
color:#329a07;

background:url(nav_a_bg.png) center no-repeat; に変更します

}

また、このようなキーワードをスタイルの名前、または新規同様、オブジェクトなど。ただし、潜在的な問題があるかどうかはわかりません。 。 、ここに専門家がいる場合は、回答できると幸いです。

たとえば、a.current を使用できます。

ねえ、クラスの優先順位が ID = = よりも高いことをなぜ覚えたのですか...


また、スタイルの名前としてこのようなキーワードを使用することは推奨されません、オブジェクトなど、潜在的な問題があるかどうかはわかりませんが。 。 、ここに専門家がいる場合は、回答できると幸いです。

たとえば、a.current を使用できます。

CSS 優先度の計算ルールは次のとおりです:

* ページで定義されているスタイルの場合は、1,0,0,0 を追加します
* 各 ID セレクター (#id など) については、0,1,0,0 を追加します
* 各クラスセレクター (.class など)、各属性セレクター ([attribute=] など)、各疑似クラス (:hover など) に 0,0,1,0 を加えたもの
* 各要素セレクター (p など) ) または疑似要素セレクター (:firstchild など) など、0,0,0,1 を追加します
次に、これら 4 つの数値をそれぞれ累積して、CSS で定義された各優先度の値を取得します

次に、左から右にサイズを少しずつ比較し、数値が大きいCSSスタイルが優先されます。