使用类 = 行操作第二个 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 选择器 n 个子级

例：

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

更多信息请访问 W3 学校网站。

请记住，此解决方案是面向未来的，并且可以在大多数现代浏览器中流畅运行，但在某些浏览器（如 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
  }

小提琴链接在这里

Answer 6

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

http://jsfiddle.net/WV3w4/