ページの選択と識別だから、

Question

#bannercontainer{ 
 
\t height: 200; 
 
\t width: 960; 
 
} 
 
#banner1{ 
 
\t height: 100px; 
 
\t width: 960px; 
 
\t background-color: white; 
 
} 
 
#banner2 {background-color: #4D4C4C; 
 
\t color: white; 
 
\t height: 100px; 
 
\t width: 960px; 
 
\t position: static; 
 
} 
 
.logo { 
 
\t width: 433px; 
 
\t height: 199px; 
 
\t float: left; 
 
} 
 
.linkcontainer{ 
 
\t height: auto; 
 
\t width: auto; 
 
\t vertical-align: bottom; 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
} 
 
a:active{ color: grey; 
 
\t font-weight: bold; 
 
\t background-color: white; 
 
\t 
 
} 
 
a, a:visited { color: white; 
 
\t text-decoration: none; \t 
 
} 
 

 

 
#link { 
 
\t padding-top: 10px; 
 
\t margin-right: 30px; 
 
\t margin-bottom:20px; 
 
\t font-size:15pt; 
 
\t font-weight: bold; 
 
\t font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t float:right; 
 
\t 
 
    } 
 
.selector { 
 
\t background-color: white; 
 
\t color: #4D4C4C; 
 
\t padding-left: 5px; 
 
\t padding-right: 5px; 
 
\t padding-bottom: 3px; 
 
\t font-weight: bold; 
 
}

<div id="bannercontainer"> 
 
\t <div id="banner1"> 
 
\t <div id="logo"><a href="index.html"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></a></div> 
 
\t </div> 
 
\t <div id="banner2"> 
 
\t \t <div id="link"><div id="selector"><a href="index.html">Home</a></div></div> 
 
\t <div id="link"><a href="about.html">About</a></div> 
 
\t <div id="link"><a href="blog.html">Blog</a></div> 
 
\t <div id="link">Contact</div><div id="link"> Projects</div> 
 
\t </div> 
 
</div>

、ユーザーが指定したページ上にある間、私は白の背景と灰色の文字を持っている白と「セレクタ」クラスであるリンクをしたいと思い、本質的に、ページがアクティブである間に色が反転されるためである。どんな助けでも大歓迎です。あなたの要素はここからそうselector

のために代わりclassのidを使用しているからだと働いていない理由を

Answer 1

理由：これまで

<div id="link"> 
    <div id="selector"> 
     <a href="index.html">Home</a> 
    </div> 
</div> 

変更を：

<div id="link"> 
<div class="selector"> 
    <a href="index.html">Home</a> 
</div> 
</div> 

そして、あなたのCSSの場合、.selectorを更新し、テキストの色は.selector aを追加してください：

.selector { 
    background-color: white; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-bottom: 3px; 
    font-weight: bold; 
} 

.selector a { 
    color: #4D4C4C; 
} 

Fiddle

また、あなたの代わりにclassを使用する必要があり、それは複数の要素に同じidを持つことは良いではないことに注意してください。私はlinksのIDを持つ複数の要素を参照しています。