使用class = row操作第二个div

Question

我有以下HTML代码。 是否可以操纵第二行元素以及如何操作？

<style>
.span11 row{}
</style>

<div class="span11">
    <div class="row"></div>
    <div class="row"></div>
</div>

有效！

.row:nth-child(2){background:#000;}

Answer 1

2路：

1. .row+.row{background:#000;}
2. .row:nth-child(2){background:#000;}

Answer 2

是..就像这样。

<style>
.span11 .row{
}

.span11 .row + .row {
}
</style>

Answer 3

您可以使用CSS3选择器nth-child

示例：

.span11 row:nth-child(2)
{
background:#ff0000;
} 

W3 Schools website的更多信息。

请注意，此解决方案可以面向未来，并且可以在大多数现代浏览器中顺利运行，但在某些浏览器（如Internet Explorer 9及更早版本）的过时版本上效果不佳。

Answer 4

您可以使用

.row:nth-child(2) {

}

Answer 5

你可以使用nth-child(child number)

.row:nth-child(the numbed child here) {

}

就像你的情况一样，你正在调整第二个孩子，所以

  .row:nth-child(2) {
  // your styles here
  }

Fiddle Link Here

Answer 6

尝试.span11 div:nth-of-type(3n+2) { border:1px solid red;}

http://jsfiddle.net/WV3w4/