1つのCSSクラスが他の無関係なクラスのリンクスタイルをオーバーライドしています

Question

.top-nav-section a:link, a:hover, a:active{}がnav-2-section a:link, a:hover, a:active{}でオーバーライドされている理由がわかりません。たとえグローバルを設定しても、nav-2セクションは引き続きオーバーライドされます。ここで問題になっているHTML/CSSです：

body { 
 
    font-family: "Gill sans", Arial, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#logo { 
 
    margin: 10px 8px 0 8px; 
 
    float: left; 
 
    width: 80px; 
 
} 
 
#top-nav { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    border: 1px #CCCCCC solid; 
 
} 
 
.top-nav-section { 
 
    border-left: 1px #CCCCCC solid; 
 
    border-height: 100%; 
 
    float: left; 
 
    text-decoration: none; 
 
} 
 
.top-nav-section a:link, 
 
a:visited, 
 
a:active { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
.top-nav-menu { 
 
    padding: 13px 20px; 
 
} 
 
#search { 
 
    background-color: #D3D3D3; 
 
    border: none; 
 
    font-weight: bold; 
 
    height: 25px; 
 
    font-size: 14px; 
 
    margin: 9px 5px 9px 10px; 
 
    float: left; 
 
} 
 
#searchbutton { 
 
    height: 25px; 
 
    width: 25px; 
 
    float: left; 
 
    margin: 10px 8px 0 0; 
 
} 
 
#signinpng { 
 
    float: right; 
 
    height: 18px; 
 
    width: 20px; 
 
    margin-left: 10px; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
#menu-bar-container { 
 
    background-color: #BB1919; 
 
    width: 100%; 
 
    height: 60px; 
 
    float: left; 
 
    border-top: 1px #CCCCCC solid; 
 
} 
 
#menu-bar { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
h1 { 
 
    padding: 0; 
 
    margin: 0; 
 
    color: white; 
 
    font-size: 44px; 
 
    font-weight: normal; 
 
    padding-top: 5px; 
 
    float: left; 
 
} 
 
#nav-2 { 
 
    background-color: #A91717; 
 
    width: 100%; 
 
    height: 30px; 
 
    float: left; 
 
} 
 
#nav-2-container { 
 
    background-color: #A91717; 
 
    width: 1000px; 
 
    height: 30px; 
 
    margin: 0 auto; 
 
} 
 
.nav-2-section { 
 
    border-left: 1px #CCCCCC solid; 
 
    float: left; 
 
} 
 
.nav-2-menu { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 1px 10px 1px 10px; 
 
    margin: 5px 0 5px 0; 
 
} 
 
.nav-2-section:hover { 
 
    border-bottom: 5px white solid; 
 
    text-decoration: none; 
 
} 
 
.nav-2-section a:link, 
 
a:visited, 
 
a:active { 
 
    color: white; 
 
    text-decoration: none; 
 
}

<div id="top-nav"> 
 

 
    <image id="logo" src="bbc-blocks-dark.png"></image> 
 

 
    <div class="top-nav-section top-nav-menu">Sign In 
 
    <input id="signinpng" type="image" src="signin.png"></input> 
 
    </div> 
 

 
    <div class="top-nav-section top-nav-menu"><a href="">News</a> 
 
    </div> 
 

 
    <div class="top-nav-section top-nav-menu"><a href="">Sport</a> 
 
    </div> 
 

 
    <div class="top-nav-section top-nav-menu"><a href="">Earth</a> 
 
    </div> 
 

 
    <div class="top-nav-section top-nav-menu"><a href="">Travel</a> 
 
    </div> 
 

 
    <div class="top-nav-section top-nav-menu"><a href="">Shop</a> 
 
    </div> 
 

 
    <div style="float:right;"> 
 
    <input id="search" type="text" placeholder="search"></input> 
 
    <input type="image" id="searchbutton" src="Search.png"></input> 
 
    </div> 
 

 
    <div class="clear"></div> 
 

 
</div> 
 

 
<div id="menu-bar-container"> 
 

 
    <div id="menu-bar"> 
 

 
    <h1>NEWS</h1> 
 

 

 
    </div> 
 

 
</div> 
 

 
<div class="clear"></div> 
 

 
<div id="nav-2"> 
 
    <div id="nav-2-container"> 
 
    <div class="nav-2-section nav-2-menu"><a href="">Home</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Video</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">World</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">US & Canada</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">UK</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Business</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Tech</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Science</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Magazine</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Entertainment & Arts</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">Health</a> 
 
    </div> 
 

 
    <div class="nav-2-section nav-2-menu"><a href="">More</a> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

.top-nav-section a:link, 
a:visited, 
a:active { 
    color: black; 
    text-decoration: none; 
} 

この1つはあなたが望む可能性が高いではありません。,はをすべて意味のブランドの新しいセレクタを作成しますa:visitedとa:activeは、子要素である.top-nav-sectionだけでなく、そのスタイルが適用されます。

.top-nav-section a:link, 
.top-nav-section a:visited, 
.top-nav-section a:active { 
    color: black; 
    text-decoration: none; 
} 

ご覧のとおり、.top-nav-sectionは3回繰り返す必要があります。

.nav-2-section a:link, a:visited, a:activeについても同じ変更が必要です。

Answer 2

CSSは "カスケーディング・スタイル・シート" の略で、カスケードは、特定のアンブレイカブルルールに従います。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance。あなたのケースでは

だけで、その位置の

top-nav-section a:link, a:hover, a:active{} 
/*is getting overridden by */ 
nav-2-section a:link, a:hover, a:active{}. 

（最新の勝利。