如何处理两个不同的垂直和水平列表答案

【问题标题】：how to handle two different vertical and horizontal lists如何处理两个不同的垂直和水平列表
【发布时间】：2013-06-25 12:53:04
【问题描述】：

我做了两个列表，一个是水平的，另一个是垂直的，每个列表都有不同的外观。

如何分别为它们指定 (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;
    }
    */

【问题讨论】：

标签： html css

【解决方案1】：

只需在元素说明符前面加上类型/类说明符即可：

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

【讨论】：

【解决方案2】：

您应该为每个列表容器添加一个类或一个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 分享实际代码，答案会更准确。

【讨论】：

值得一提的是 ID(#ID) 必须是唯一的，并且一个类可以多次使用。因此，如果只有一个元素需要特定样式，则使用 ID，如果有多个元素需要相同样式，则使用类 (.class)。
@jezzipin 不正确。 id 应该永远用于指定样式。通过 CSS 验证器运行它，这是非法的。
此外，ID 比类具有更高的特异性，因此您应该使用#ID 标签，而不是使用链接类来引用特定元素，因为它更快并加快加载时间。因此，它在实际使用中比一些无用的 CSS 验证器更实用。