Hello MUI

结构伪类选择器概述

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

1.E:first-of-type选择器

选择同类型的第1个同级兄弟元素

父代

本体

子代

孙代

兄弟

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

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

2.E:last-of-type选择器

选择同类型的最后1个同级兄弟元素

父代

本体

子代

孙代

兄弟

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

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

3.E:nth-of-type(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-of-type(3){
	color:red;
}

4.E:nth-last-of-type(n)选择器

选择同类型的倒数第n个同级兄弟元素

父代

本体

子代

孙代

兄弟1

兄弟2

兄弟3

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

	
#t4_father>div:nth-last-of-type(2){
	color:red;
}

5.E:only-of-type选择器

选择父元素中特定类型的唯一子元素（该父元素有多个子元素）

父代

本体

子代

孙代

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

	
#t5_father>div:only-of-type{
	color:red;
}