：最後一個小孩不工作

這是我第一次在這裏發表，所以請告訴我，如果我做錯了什麼。我有下面的代碼有問題：：最後一個小孩不工作

這是我的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

：最後一個小孩不工作

回答

相關問題