Question

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

如何分别为这两个属性指定（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;
    }
    */

Answer 1

只需在元素说明符前添加前面的类型/类说明符：

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

Answer 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分享实际代码，答案会更精确。

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

2 个答案: