0

説明するのは難しいので、ここにいくつかのコードがあります。

だから私はこのCSSを持っています。これはすべてのリンクをオレンジ色にします。ページ全体を網羅します。

#pageContent a:link,a:visited, a:hover, a:active {
    color: #EE4036; 
}

そして、pageContentid内のどこかにidsideMenuの要素があります。

#sideMenu a:link, a:visited, a:hover, a:active{
    color:#58595B;

}

問題は、何らかの理由で、sideMenuの指定されたリンクの色が、sideMenuの子ではないリンクのpageContentのリンクの色を上書きしていることです。

たとえば、私が持っていた場合

<div id="pageContent" >
   <a>this text should be #EE4036</a>
   <div id="sideMenu">
      <a>this text should be #58595B</a>
   </div>
</div>

sideMenuの<a>テキストコンテンツは期待どおりに＃58595Bの色に設定されますが、pageContentのテキストコンテンツも同様に設定されます。これは私が予想していなかったことです。

私はCSSに少し慣れていないので、いくつかの非常に明白なルールが欠落しているように感じ、グーグルはまったく役に立ちません。だから、誰もが何が起こっているのか知っていますか？

4

2 に答える 2

9

You would need to prefix each selector with the ID:

#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
    color:#58595B;
}

Currently, your selector says match "links that are descendants of an element with ID "slideMenu", links that have been visited, links that are being hovered, and active links".

Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.

于 2012-09-27T17:35:54.110 に答える
2

Well, you are actually redefining the same rule. You must write down each time the #sideMenu or #pageContent. Here it is:

#pageContent a:link, #pageContent a:visited, #pageContent a:hover, #pageContent a:active {
    color: #EE4036; 
}
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
    color: #58595B; 
}

Voila. Hope it helps.

于 2012-09-27T17:38:51.357 に答える