如何處理兩個不同的垂直和水平列表

我做了兩個列表，一個是水平的，另一個是垂直的，每個都有不同的外觀。如何處理兩個不同的垂直和水平列表

如何分別爲它們指定（a：link，a：visited，a：hover，a：active）屬性？

頂部水平菜單

  <!DOCTYPE> 
     <html> 
     <head> 
     <link rel="stylesheet" type="text/css" href="d.css"/> 

     <title></title> 
     </head> 

     <body> 
     <ul id="topp"> 
      <li class="tl"><a href="#" class="ta"> Home </a></li> 
      <li class="tl"><a href="#" class="ta"> New Products </a></li> 
      <li class="tl"><a href="#" class="ta"> Specials </a></li> 
      <li class="tl"><a href="#" class="ta"> Contact </a></li> 
     </ul> 

     </body> 
     </html>

頂部橫向菜單CSS文件

  @charset "utf-8"; 
     /* CSS Document */ 

     #container{ 
      border-style:solid; 
      border-width:thin; 
      background-color:green; 
      height:100%; 
     } 
     .inner{ 
      border-style:solid; 
      border-width:thin; 
      background-color:#0C3; 
      height:600px; 
      width:90%; 
      position:absolute; 
      left:50px; 
     } 



     #head{ 
      background-color:#FF9; 
      height:100px; 
      width:80%; 
      position:absolute; 
      top:0; 
      bottom:550; 
      left:0; 
      right:0; 
      margin:auto; 

     } 
     #topp{ 
      list-style-type:none; 
      margin:0; 
      padding:0; 
      position:absolute; 
      top:100; 
      bottom:550; 
      left:300; 
      right:0; 
      margin:auto; 

     } 
     .ta{ /*Top menu anchor*/ 
      display:block; 
      width:100px; 


     } 
     .tl{ /*top menu list*/ 
      background-color:#3F6; 
      border-style:solid; 
      border-width:thin; 
      float:left; 
      text-align:center; 
     } 

     a:link,a:visited 
     { 
     display:block; 
     font-weight:bold; 
     color:#FFFFFF; 
     background-color:#98bf21; 
     width:120px; 
     text-align:center; 
     padding:4px; 
     text-decoration:none; 
     } 

     a:hover,a:active 
     { 
     background-color:#FF9; 
     color:#000; 
     }

垂直菜單

   <!DOCTYPE> 
      <html> 
      <head> 
      <link rel="stylesheet" type="text/css" href="leftm.css"/> 

      <title></title> 
      </head> 

      <body> 
      <div class="arrowgreen"> 
      <ul class="glossymenu"> 
      <li><a href="#" class="selected" title="Home">Home</a></li> 
        <li><a href="#" title="new products">new products</a></li> 
        <li><a href="#" title="specials">specials</a></li> 
        <li><a href="#" title="Contact">Contact</a></li>  
      </ul> 
      </div> 
      </body> 
      </html>

垂直菜單的CSS網絡樂

 @charset "utf-8"; 
    /* CSS Document */ 

    .arrowgreen{ 
     width: 180px; /*width of menu*/ 
     border-style: solid solid none solid; 
     border-color: #94AA74; 
     border-size: 1px; 
     border-width: 1px; 
    } 

    .arrowgreen ul{ 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
    } 

    .arrowgreen li a{ 
     font: bold 12px Verdana, Arial, Helvetica, sans-serif; 
     display: block; 
     background: transparent url(media/arrowgreen.gif) 100% 0; 
     height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/ 
     padding: 4px 0 4px 10px; 
     line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/ 
     text-decoration: none; 
    } 

    .arrowgreen li a:link, .arrowgreen li a:visited { 
     color: #5E7830; 
    } 

    .arrowgreen li a:hover{ 
     color: #26370A; 
     background-position: 100% -32px; 
    } 


    /*.arrowgreen li a.selected{ 
     color: #26370A; 
     background-position: 100% -64px; 
    } 
    */

來源

2013-06-25 Abbas Ansari

向我們顯示您的代碼。 – Nitesh

只是一前一類型/類說明前綴元素符：

.someClass a:link { } 
.someOtherClass a:link { }

來源

2013-06-25 12:54:20

您應該添加一個類或ID到每一個列表容器：

<ul class="list-1"> 
    <li><a href="#">Foo</a></li> 
    <li><a href="#">Bar</a></li> 
    <li><a href="#">Baz</a></li> 
</ul> 

<ul class="list-2"> 
    <li><a href="#">Foo</a></li> 
    <li><a href="#">Bar</a></li> 
    <li><a href="#">Baz</a></li> 
</ul>

然後你可以像這樣在CSS中使用父選擇器：

.list-1 a:link {color: red;}  /* unvisited link */ 
.list-1 a:visited {color: orange;} /* visited link */ 
.list-1 a:hover {color: yellow;} /* mouse over link */ 
.list-1 a:active {color: pink;} /* selected link */ 

.list-2 a:link {color: blue;}  /* unvisited link */ 
.list-2 a:visited {color: violet;} /* visited link */ 
.list-2 a:hover {color: lightblue;} /* mouse over link */ 
.list-2 a:active {color: purple;} /* selected link */

如果您通過http://jsbin.com分享實際代碼，答案會更加精確。

來源

2013-06-25 12:58:35

值得一提的是ID（#ID）必須是唯一的，並且一個類可以多次使用。因此，如果只有一個元素需要特定的樣式使用ID，並且如果有多個元素需要相同的樣式，則使用類（.class）。 – jezzipin

謝謝，我已經分享了代碼現在.. –

@jezzipin錯誤。 'id' should _never_用於指定造型。通過CSS驗證器運行它，這是非法的。 –

如何處理兩個不同的垂直和水平列表

回答

相關問題