css - CSS 和链接的问题

Question

看来你们是对的。更改顺序已解决问题。看起来很容易修复。感谢所有评论/帮助。

---

我的链接和 CSS 有一些问题。下面是我的网站代码。我的问题是我有 5 个链接都使用同一个类。它们都显示正确并且链接工作正常但悬停和事件不会首先改变。最后三个工作正常。为什么是这样？到底是怎么回事？我已经全部删除并重新输入。我尝试过不同的浏览器。删除了缓存。什么都没有。

HTML代码:

<tr bgcolor="#FFFFFF">
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_02.gif" width="57" height="51" alt=""></td>
  <td align="center" height="29"><a href="index.php" class="menu">Home</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_04.gif" width="41" height="51" alt=""></td>
  <td align="center" height="29"><a href="about.php" class="menu">About</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_06.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="products.php" class="menu">Products</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_08.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="recipes.php" class="menu">Recipes</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_10.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="contact.php" class="menu">Contact</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_12.gif" width="58" height="51" alt=""></td>

CSS 代码:

a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

Answer 1

按以下顺序放置您的链接 CSS:

一个

a:访问过

a:悬停

一个:活跃

对于您的示例，此 css 应按预期工作:

    a.menu:link {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}

    a.menu:visited {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}


    a.menu:hover {
    color: #713010;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}

    a.menu:active {
    color: #F9A22E;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}