html - 一个 CSS 类覆盖了另一个不相关类的链接样式

Question

我不明白为什么 .top-nav-section a:link, a:hover, a:active{} 被 nav-2-section a:link 覆盖， a:hover, a:active{}。即使我设置了全局，nav-2-section 仍然会覆盖。这是有问题的 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;
}

这很可能不是您想要的。 , 创建一个全新的选择器，这意味着 all 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 需要进行相同的更改。