CSS nth-child() 给连续的几个DIV元素赋不同的背景色

Posted 2020-10-27 wbely

<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子级,依次类推