4

我的链接有问题，我似乎无法找到第一个孩子为什么会这样。

它没有修改我的无序列表中的第一个链接，而是修改了所有链接。当我尝试使用 last-child 或 nth-child 时，也会发生同样的事情。

谁能帮我解决这个问题？谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>
<head>
    <title></title>
    <style type="text/css">
        * {margin:0;padding:0;font-size:13px;color:white;font-family:arial;}
        body {background-color:black;}
        #wrapper {margin:0px auto;width:1024px;}

        #types {position:relative;top:4px;width:810px;list-style-type:none;}
        #types li {display:inline;}
        #types a {text-decoration:none;padding:8px;margin:-1px;background-color:#1A1A1A;}
        #types a:hover {background-color:#A02723;}
                #types a:first-child {background-color:#A02723;}

    </style>
    <script type="text/javascript">

    </script>
</head>

<body>
    <div id="wrapper">

        <ul id="types">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
        </ul>
    </div>
</body>
</html>
4

2 回答 2

12

a:first-child匹配<a>作为其父元素的第一个子元素的元素。您的<a>元素在完全不同<li>的 s 中，因此它们都是其父元素的第一个子元素。

您应该匹配<li>元素：

#types li:first-child a {background-color:#A02723;}
于 2012-09-14T08:18:09.927 回答
2

尝试

#types li:first-child a

安装。

于 2012-09-14T08:17:36.263 回答