Hello MUI

属性选择器选择器概述

利用CSS的属性选择器可以根据标签的属性及属性值来选择元素。本节讲解其中的E[attr^="val"]、E[attr$="val"]、E[attr*="val"]选择器。

1.E[attr^="val"]属性开头选择器

E[attr^="val"]属性选择器用来选择E标签中有attr属性，且属性值以"val"开头的元素。需要注意的是此处的E可以省略，如果省略表示可以匹配任何满足条件的元素。

父代

本体

子代

孙代

兄弟

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

	
.test_offspring[id^="t20"]{
	color:red;
}

2.E[attr$="val"]属性结尾选择器

E[attr$="val"]属性选择器用来选择E标签中有attr属性，且属性值末尾匹配“val”的元素。同样，如果省略E表示可以匹配任何满足条件的元素。

父代

本体

子代

孙代

兄弟

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

	
.test_offspring[id$="21_me"]{
	color:red;
}

3.E[attr*="val"]属性任意位置选择器

E[attr="val"]属性选择器用来选择E标签中有attr属性，其属性值包含“val”的元素。同样，如果省略E表示可以匹配任何满足条件的元素。

父代

本体

子代

孙代

兄弟

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

	
.test_offspring[id*="22_m"]{
	color:red;
}

4.E[attr="val"]属性全匹配选择器

E[attr="val"]属性选择器用来选择E标签中有attr属性，其属性值等于“val”的元素。同样，如果省略E表示可以匹配任何满足条件的元素。

父代

本体

子代

孙代

兄弟

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

	
.test_offspring[id="t23_me"]{
	color:red;
}