css - CSS3 第一个 div 唯一技巧

Question

我有一个带有一堆 div 的容器。我想要一个灰色的顶部边框，除了第一个应该是白色的顶部边框。我尝试了 nth-child，但我的代码似乎有问题。

<div class="container">
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
</div>

.row{ border-top-width: 1px; border-top-style: solid; border-top-color: #ccc;}
.row:nth-child1{  border-top-width: 1px; border-top-style: solid; border-top-color: #FFF;}

Answer 1

.row { border-top: 1px solid #ccc;}
.row:first-child {  border-top-color: #FFF;}

jsFiddle：http: //jsfiddle.net/MSDYY/

另一个，背景设置为红色，以显示第一个元素实际上有白色上边框：http: //jsfiddle.net/MSDYY/1/

如果你想使用nth-child它应该是这样的：.row:nth-child(1)

Answer 2

要么使用：

.row:nth-child(1)

或者

.row:first-of-type

或者

.row:first-child

前两个是 IE9+，但最后一个也适用于 IE8。