<div id="OutSide"><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div><div class="InSide"></div></div>
如上 想给ID==OutSide的div下的九个div分别赋上不同的颜色以行程九宫格。
这时用到了nth-child()
在样式里这样写
#OutSide div:nth-child(1){ background-color: red;}
???#OutSide div :nth-child(2){ background-color: blue;}
???#OutSide div :nth-child(3){ background-color: green;}
???#OutSide div :nth-child(4){ background-color: purple;}
???#OutSide div :nth-child(5){ background-color: palegreen;}
???#OutSide div :nth-child(6){ background-color: palevioletred;}
???#OutSide div :nth-child(7){ background-color: pink;}
???#OutSide div :nth-child(8){ background-color: plum;}
???#OutSide div :nth-child(9){ background-color: mistyrose;}
可以理解为 ID==OutSide的父级元素下，第一个div子级，第二个，第三个div子级,依次类推
CSS nth-child() 给连续的几个DIV元素赋不同的背景色
原文地址：https://www.cnblogs.com/Wbely/p/8550345.html