CSS Last-Child Selector - влияет на все мои DIVs?

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"> является первым и последним дочерним элементом его родителя, поэтому ваш текущий селектор соответствует всем им, вместо этого вы хотите <div> внутри последнего <li>, поэтому используйте :last-child на <li>, вы можете проверить это здесь (я изменил границу на черный, чтобы сделать ее более очевидной).

Для предыдущего вопроса: Это потому, что вам не хватает кавычки в атрибуте 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 имеют границы, вы можете проверить это здесь .