Question

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

不是修改无序列表中的第一个链接，而是修改它们。当我尝试使用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>

Answer 1

a:first-child匹配作为其父级的第一个子级的<a>个元素。您的<a>元素与<li>完全不同，因此所有是其父元素的第一个子元素。

您应该匹配<li>元素：

#types li:first-child a {background-color:#A02723;}

Answer 2

尝试

#types li:first-child a

insted的。

a：修改我列表中所有链接的第一个孩子

2 个答案: