Question

我的导航锚标记是导航的最后一个子元素我尝试删除左边的填充但它不会删除但是当我尝试添加填充时它会添加它。有什么想法吗？

<div class="main_nav">
        <div class="logo">
            <img src="Logo/logo.png">
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Aboutus</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div

.main_nav{
    width:1200px;
    margin:0 auto;
    height:90px;
    background-color:orange;
}
.logo{
    clear:both;
    float:left;
    padding-top:15px;
}
nav ul{
    float:right;
    padding-top:33px;
}
nav li{


    display:inline;
    padding-right:40px;
    background-color:yellow;

}
nav li:last-child a{
    padding-right:0px;
}

Answer 1

从你的代码中你真正想要这个：

nav li{
    display:inline;
    padding-right:40px; /* padding applied */
    background-color:yellow;

}
nav li:last-child { /* padding on last list item removed */
    padding-right:0px;
}

您尚未对锚点应用填充，因此无法将其删除：

nav li:last-child a{
    padding-right:0px;
}

你说：

我的导航锚标记是导航的最后一个子元素。

实际上，它不是（并且它有点）。在诸如此之类的列表中，每个锚链接都是li的最后一个孩子，因为它也是第一个也是唯一的孩子。

nth-of语句（包括first和last等）始终引用父元素的子元素。

因此，li:last-child始终是其父亲ul的最后一个孩子。

为什么我的最后一个孩子li elemens padding不被删除？

1 个答案: