Hello MUI

结构伪类选择器概述

结构伪类选择器是指根据文档结构来选择目标元素。常用于筛选父级选择器的子元素。

1.E:first-child选择器

选择父元素的第一个子元素

父代

本体

子代

孙代

兄弟

						
<div id="t1_father">父代
	<div>本体
		<div>子代
			<div>孙代</div>
		</div>
	</div>	
	<div>兄弟</div>
</div>

	
#t1_father>div:first-child{
	color:red;
}

2.E:last-child选择器

选择父元素的最后一个子元素

父代

本体

子代

孙代

兄弟

						
<div id="t2_father">父代
	<div>本体
		<div>子代
			<div>孙代</div>
		</div>					
	</div>	
	<div>兄弟</div>
</div>

	
#t2_father>div:last-child{
	color:red;
}

3.E:nth-child(n)选择器

选择父元素下的第n个元素或奇偶元素，注意序号从1开始

父代

本体

子代

孙代

兄弟1

兄弟2

兄弟3

						
<div id="t3_father">父代
	<div>本体
		<div>子代
			<div>孙代</div>
		</div>
	</div>
	<div>兄弟1</div>
	<div>兄弟2</div>
	<div>兄弟3</div>
</div>

	
#t3_father>div:nth-child(3){
	color:red;
}

4.E:only-child选择器

选择父元素中唯一的子元素（该父元素需只有一个子元素）

父代

本体

子代

孙代

						
<div id="t4_father">父代
	<div>本体
		<div>子代
			<div>孙代</div>
		</div>
	</div>
</div>

	
#t4_father>div:only-child{
	color:red;
}