html - 未应用 css 的第 nth-child(number) 选择器

Question

我想在 600*600 格内放置 3 个 200*200 的矩形格。与 25 像素的分离。我的第一个代码工作正常。但是当我尝试应用 nth-child(1) 和 nth-child(2) 时，它不起作用。

https://jsfiddle.net/user1989/L20fn90L/

如果我将样式部分更改为

#two-parent :nth-child(0){
margin-top:25px;
width:200px;
height:200px;
background-color : black;

float:left;

}
#two-parent :nth-child(1){
margin-top:25px;
position:relative;
width:200px;
height:200px;
background-color : orange;
margin-left:25px;
float:left;
}

未应用子选择器。

Answer 1

您正在使用 div 作为子容器，那么这些 CSS 声明应该可以完成工作:

#two-parent div:nth-child(1) { /** :nth-child(1) for 1st child  **/
  /** Declaration **/
}
#two-parent div:nth-child(2) { /** :nth-child(2) for 2nd child **/
  /** Declaration **/
}