Question

这是我在这里的第一篇文章，所以请告诉我，如果我做错了什么。我在使用以下代码时遇到问题：

那是我的HTML：

            <div class="sideSection">
            <div class="sidebar">
            <div class="mainContainer">
            <div class="articleHeader">
            <h3>Sapien lorem tempus</h3>
            <h4>Pharetra sed bibendum lorem</h4>
            </div>
            <p>Nunc cursus quam vitae ipsum viverra luctus. Nam nullam feugiat massa lacinia lectus vitae. Sed eu turpis at adipiscing.</p>
            <div class="sidebarBox">
            <img src="images/pic04.jpg" alt="ernster Blick">
            <div class="sidebarBoxText">
            <a href="#">Cursus quam vitae</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic05.jpg" alt="Straße">
            <div class="sidebarBoxText">
            <a href="#">Etiam at orci ut nibh</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic06.jpg" alt="telefonierender Blick">
            <div class="sidebarBoxText">
            <a href="#">Mauris non tellus</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic07.jpg" alt="Skyscraper">
            <div class="sidebarBoxText">
            <a href="#">Duis id ipsum</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="moreInfoButton"><a href="#">More Info</a></div>
            </div>
            </div>
            </div>

这是我的CSS：

.sideSection .sidebar,
.sideSection .sidebar .sidebarBox {
float: left;
}
.sideSection .sidebar .sidebarBox {
padding: 25px 0px 20px;
border-bottom-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sideSection .sidebar .sidebarBox:last-child {
border: none;
}

现在，我想要做的是从最后一个＆＃34; sidebarBox＆＃34;删除边框。类。这还没有完成，因为代码根本不会影响边界。我不知道自己做错了什么，我希望有人可以在这里帮助我，就像工作一样：S

编辑：好的，就我现在所知，这是一个问题。当我使用＆＃34;＆＃34; .sidebarBox：nth-child（6）＆＃34;＆＃34;它工作得很好.. ＆＃34 ;: last-child＆＃34;属性实际上计算了我在该部分中使用的所有内容吗？

Answer 1

:last-child仅匹配父div的实际最后一个子节点。

你有.moreinfoButton跟随它。如果您可以将button移到.mainContainer之外，它会按预期工作

Answer 2

:last-child选择器适用于父div中的最后一个元素。在您的情况下，父div为.mainContainer，其最后一个孩子为.moreInfoButton而不是.sidebarBox。

我建议您将last类添加到要修改的侧边栏中，即 <div class="sidebarBox last">

和corrspondent css代码是

.sideSection .sidebar .sidebarBox.last { border: none; }

或另一种处理方法是将所有.sidebarBox元素包装在一个父<div>中。然后，您就可以使用:last-child选择器。

：最后一个孩子不工作

2 个答案: