CSS Last-Child Selector - 影响我所有的 DIV？

Question

我有以下

CSS

.streamBox {
 font-size:12px;
 background-color:#EDEFF4;
 border-bottom:1px solid #E5EAF1;
 margin-top:2px;
 padding:5px 5px 4px;
}
.streamBox:last-child {
   border: none;
}

HTML

<ul id="activityStream">

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

</ul>

我认为最后一个子选择器会成功，所以最后一个 DIV 没有边框...但是现在所有 DIV 都没有边框？是吗？

关于如何使用 CSS 使最后一个 div 没有边框的建议？

谢谢，

Answer 1

更新问题：

您的选择器需要调整，应该是：

li:last-child .streamBox {
  border: none;
}

<div class="streamBox"> 是 其 父级的第一个和最后一个子级，因此您当前的选择器匹配所有这些子级，而不是您希望在最后一个 <li> 中使用 <div>，所以使用<li>、you can test it here 上的 :last-child（我将边框改为黑色以使其更明显）。

上一个问题： 这是因为您在 class="" 属性上缺少引号，请像这样修复它：

<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>​​​​

然后它将按预期工作，前 3 个有边框，you can test it here。