：最后一个小孩不工作

这是我第一次在这里发表，所以请告诉我，如果我做错了什么。我有下面的代码有问题：：最后一个小孩不工作

这是我的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; 
}

现在，我想要做的，就是从最后一个“sidebarBox”类中删除边框。这还没有完成，因为代码根本不影响边界。我真的不知道我在做什么错，我希望有人能帮助我，因为它是为了工作：S

编辑：好吧，据我现在想通了，这是一个问题与s。当我使用“”.sidebarBox：nth-child（6）“”它工作得很好.. “：last-child”属性是否实际计算了我在该节中使用的所有s？

来源

2016-03-15 Richard R

您所显示的HTML代码不包含单个'section'或'aside'元素...请创建一个[mcve]，这实际上反映了问题。 – CBroe

对不起，我不是故意把他们放在那里..他们不是问题的一部分。 –

:last-child只匹配父div的实际最后一个孩子。您在.moreinfoButton之后。如果您可以将button移动到.mainContainer之外，则它将按照您的预期工作

来源

2016-03-15 11:30:05 Stuart

这对我来说已经解决了！ D.非常感谢; D –

:last-child选择器适用于父div内的最后一个元素。在你的情况下，父分区是.mainContainer和最后一个孩子是.moreInfoButton而不是.sidebarBox。

我会建议你last类添加到您要修改的sidebarBox，即 <div class="sidebarBox last">

和corrspondent CSS代码是

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

或者另一种方式来处理它是将所有.sidebarBox元素包装在一个父母<div>中。那么你将能够使用:last-child选择器。

来源

2016-03-15 11:32:25 felicete

：最后一个小孩不工作

回答

相关问题