Hello MUI

结构伪类选择器概述

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

1.:root选择器

选择文档的根元素。在HTML中，根元素永远是HTML

父代

本体

子代

孙代

兄弟

						
<div id="t10_father">父代
	<div>本体
		<div>子代
			<div>孙代</div>
		</div>					
	</div>
	<div class="test_offspring">兄弟</div>
</div>

	
:root #t10_father{
	color:red;
}

2.E:not(selector)选择器

选择某个元素之外的所有元素

父代

本体

子代

孙代

兄弟

						
<div id="t11_father">父代
	<div id="t11_me">本体
		<div>子代
			<div>孙代</div>
		</div>					
	</div>
	<div class="test_offspring">兄弟</div>
</div>

	
#t11_father div:not(#t11_me){
	color:red;
}

3.E:empty选择器

选择一个不包含任何子元素的元素。文本节点也被看成子元素

父代

本体

子代

孙代

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

	
#t3_father div:empty{
	color:red;
}

4.E:target选择器

选取页面中的某个target元素

本体子代还原1 还原2

父代

本体

子代

孙代

兄弟

父代兄弟

						
<a href="#t13_me">本体</a>
<a href="#t13_son">子代</a>		
<a href="#t13_father_brother">还原</a>
<a href="" class="target_test">还原2</a>

<div id="t13_father">父代
	<div id="t13_me">本体
		<div id="t13_son">子代
			<div>孙代</div>
		</div>					
	</div>	
	<div>兄弟</div>
</div>
<div id="t13_father_brother">父代兄弟</div>

	
#t13_father div:target{
	color:red;
}