Question

我的A：hover标签的第一个孩子正在删除所有填充而不是仅删除第一个子节点。是什么造成的？谢谢你的帮助。 Stackoverflow需要更多文字，但除了我可能遇到的元素选择问题之外，我不能再说些什么了。

     <nav>
            <h2>Navigation</h2>
            <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Foo</a></li>
                    <li><a href="">Roo</a></li>
                    <li><a href="">Gamen</a></li>
                    <li><a href="">puta</a></li>
            </ul>
        </nav>
___________________________________________________________________________


    nav li{
        list-style-type:none;
        padding:10px 0px;
        font-size:20px;
        float:left;

    }

    nav h2{
        text-indent: -10000px;
    }
    .Latest_Content{
        clear:both;
    }

    nav a{
        text-decoration:none;
        padding:10px 20px 10px 20px;
        color:#000000;
        font-family:'Droid Sans', sans-serif; 

     }
    nav a:hover{
        color:#ffffff;
        background-color:#42b84f;
        padding:10px 20px 10px 20px;
        -webkit-transition: 0.4s;

    }

    nav a:first-child:hover {
        padding-left:0px;

    }

Answer 1

a:first-child将从所有列表中选择所有第一个子元素。

应该是：

nav li:first-child a:hover{
  padding-left: 0;
}

现在，您只选择第一个列表标记。

Answer 2

    nav a:hover{
        color:#ffffff;
        background-color:#42b84f;
        padding:10px 20px 0px 20px;
        -webkit-transition: 0.4s;

    }

    nav a:first-child:hover {
        padding-left:10px;

    }

Answer 3

解决方案可能是：

nav li:first-child a{
    padding-left:0px;
}

这是因为您开始列出所有li并转到要更改的元素。

在您的代码nav a:first-child:hover中，您尝试列出a，因为您在每个li上看到的只有一个a，这是因为所有{{1}使用a进行更改。

为什么我的填充物不能仅从第一个孩子身上移除

3 个答案: