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>ので、それらはすべて親要素の最初の子です。

<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 に答える