有关css nth-child()和>的整合使用复习

注释：图片的第一行为aa，依次嵌套至内

菜鸟教程(runoob.com) .aa > input{ background-color:pink; }

<div class='aa'>
	<input>
	<input>
	<div class='aab'>
		<input>
		<input>
	</div>
	<div class='aac'>
		<input>
		<input>
	</div>
</div>

如果是单纯的元素添加大于号，

1. 根据定义的图层会取到class名为aa图层的里的所有input元素
2. 不包括嵌套图层里面的input 显示结果如下：

菜鸟教程(runoob.com) .aa > input:nth-child(1){ background-color:pink; }

<div class='aa'>
	<input>
	<input>
	<div class='aab'>
		<input>
		<input>
	</div>
	<div class='aac'>
		<input>
		<input>
	</div>
</div>

如果是与nth-child相结合：

1. 则会进一步取到名为aa的图层里的指定第几个input

菜鸟教程(runoob.com) .aa input:nth-child(1){ background-color:pink; }

<div class='aa'>
	<input>
	<input>
	<div class='aab'>
		<input>
		<input>
	</div>
	<div class='aac'>
		<input>
		<input>
	</div>
</div>

如果单纯只有nth-child： 1. 首先是包含嵌套图层的检索 2. 针对于class名为aa图层里所有嵌套图层（外加aa图层）里的指定的第几个input