链接功能不起作用

时间:2015-03-08 14:03:54

标签: html css

我的代码无法正常工作,我正在尝试更改链接的颜色(稍后会添加更多规格),但它不会发生变化。不执行这些功能。我尝试更改类,添加id,但没有任何作用。有人可以告诉我如何解决它。

CSS



       a:link.NB {

         color: red;

       }

       a:visited.NB {

         color: blue;

       }

       a:hover.NB {

         color: #green;

       }

       a:active.NB {

         color: #423243;

       }

<nav id="N_bar">
  <ul>

    <li><a class="NB" href="#">Men</a>
    </li>
    <li><a class="NB" href="#">Women</a>
    </li>
    <li><a class="NB" href="#">Children</a>
    </li>
    <li><a class="NB" href="#">Apparel</a>
    </li>

  </ul>
</nav>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

这里有一些问题。

  • 在CSS样式结束时,您未关闭#M_section
  • #green应该只是green

请参阅fiddle

答案 1 :(得分:1)

请检查

a.NB:link {
    color: red;
}
a.NB:visited {
    color: blue;
}
a.NB:hover {
    color: green;
}
a.NB:active {
    color: #423243;
}

答案 2 :(得分:0)

检查此代码。我希望解决您的问题:
这是您的代码我只需将 #green更改为 green
并关闭 #M_section

<!Doctype html>
<html lang="eng">
<head>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
    list-style-type:none;
    }

body{
        background-image:url("Aba2.jpg");
    text-align:center;
    }
    header, section, footer, aside, nav{display:block}

    #Wrapper{
     border: 2px solid blue;
     width:1000px;
     margin:20px auto;


    }
    #H_wrap{
     padding:10px;
     border:2px solid yellow;
     background-image:url("Abracci1.jpg");
    background-repeat:repeat-x;


    }

    #M_head{
    padding:10px;
    font:italic bold 34px/30px "Times New Roman" Times, arial;
    Text-align:center;
    color:#000000;
    text-shadow:2px 2px #999999;
    text-decoration:underline;

    }

    #N_bar {
    padding:20px;
    text-align:center;
    word-spacing:6em;
    font:italic bold 25px/30px "Times New Roman" Times, arial;
    text-shadow:3px 3px #999999;
    }

     a.NB:link {
     color:red;
    }
     a.NB:visited{
     color:blue;
    }
     a.NB:hover{
     color:green;
    }
     a.NB:active.NB{
     color:#423243;
    }


    #N_bar li{
    display:inline-block;
    }

    #M_section{
     background-image:url("Aba3.jpg");
    float:left;
    clear:both;
}
</style>
    <meta charset="uft-8"/>
     <link rel="stylesheet" href="Abracci_main.css"/>
   </head>

   <body>
      <div id="Wrapper">
       <div id="H_wrap">

         <header id="M_head">
         Abracci
         </header>


         <nav id="N_bar">
             <ul>

                 <li><a class="NB" href="###">Men</a></li>
                 <li><a class="NB" href="##">Women</a></li>
                 <li><a class="NB" href="#$">Children</a></li>
                 <li><a class="NB" href="#@">Apparel</a></li>
             </ul>
         </nav>
         </div>
         <section id="M_section">


         </section>
         <aside id="M_aside">

         </aside>
         <footer id="M_footer">

         </footer>

      </div>



</body>
</html>
<HTML>


如果之后这些颜色没有改变。清除您的浏览器历史记录。