Question

为什么导航链接采用普通链接的风格？

这是一个基本的导航菜单：

<!--      Begin menu -->
<div align="center"> <span class="nav">
  <a href="index.html" title="Graphic Boulevard - Home pagina">Home</a> | 
  <a href="autobelettering.html" title="Graphic Boulevard - Autobelettering">Autobelettering</a> | 
  <a href="reclame.html" title="Graphic Boulevard - Binnen reclame en Buiten reclame">Reclame</a> | 
  <a href="prints.html" title="Graphic Boulevard - Groot formaat printen">Prints</a> | 
  <a href="textiel.html" title="Graphic Boulevard - Textiel bedrukken">Textiel</a> | 
  <a href="ontwerpen.html" title="Graphic Boulevard - Ontwerpen">Ontwerpen</a> | 
  <a href="aanleveren.html" title="Graphic Boulevard - Digitale bestanden aanleveren">Aanleveren</a> | 
  <a href="contact.html" title="Graphic Boulevard - Neem contact met ons op.">Contact</a>
</span><br />
</div>
   <!--   Einde Menu -->

这是CSS

/* Normal links */

a {
    font-size: 12px;
    color: #DC342F;
}

a:link {
    text-decoration: none;
    color: #DC342F;
}
a:visited {
    text-decoration: none;
    color: #DC342F;
}
a:hover {
    text-decoration: underline;
    color: #DC342F;
}

a:active {
    text-decoration: none;
    color: #DC342F;
}

/* navigation links */

a.nav {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

Answer 1

这可能属于doctype，但我认为您希望您的选择器读取“.nav a”而不是“a.nav”。

Answer 2

Kev是正确的

a.nav是一个带nav类的超链接元素

.nav a是父类nav

中的超链接

Answer 3

您的链接本身没有“nav”类。你想要这个：

span.nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

链接css不同的配色方案问题

3 个答案: