Hello MUI

关系选择器概述

关系选择器也称复合选择器、派生选择器，是建立在基本选择器之上，由两个或多个基本选择器通过不同的方式组合而成的。常用的关系选择器有后代选择器、子代选择器、标签指定式选择器、并集选择器等。

1.后代选择器

后代选择器又称为包含选择器，可以选择HTML父元素里面的子元素。其写法就是把外层元素写在前面，内层元素写在后面，中间用空格分隔。当元素发生嵌套时，内层元素就成为外层元素的后代。其语法格式如下： 元素1 元素2{样式声明}

父代

本体

子代

孙代

兄弟

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

						
#test1_me div{
	color: red;
}

2.子代选择器

子代选择器只能选择作为某元素的最近一级子元素，简单理解就是选“亲儿子”元素。其语法格式如下： 元素1>元素2{样式声明}

父代

本体

子代

孙代

兄弟

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

						
#test2_me>div{
	color: red;
}

3.紧邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用临近兄弟选择器。临近兄弟选择器用“+”连接。其语法格式如下： 元素1+元素2{样式声明}

父代

本体

子代

孙代

兄弟1

兄弟2

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

	
#test2_me+div{
	color: red;
}

4.所有兄弟选择器

所有兄弟选择器选中所有的兄弟其语法格式如下： 元素1~元素2{样式声明}

父代

本体

子代

孙代

兄弟1

兄弟2

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

	
#test2_me~div{
	color: red;
}

5.并集选择器

并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，任何形式的选择器都可以作为并集选择器的一部分。其语法格式如下： 元素1,元素2{样式声明}

父代

本体

子代

孙代

兄弟

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

	
#test5_me,#test5_grandson{
	color:red;
}

6.标签指定式选择器

标签指定式选择器又叫交集选择器，是由两个选择器直接连接构成的，其中第一个必须是标签选择器，第二个必须是类选择器或者id选择器。这两个选择器之间不能有空格，必须连续书写。其语法格式如下： 标签.类名|id选择器{样式声明}

div标签test_offspring类

p标签test_offspring类

p标签无类

	
<div class="test_offspring">div标签test_offspring类</div>
<p class="test_offspring">p标签test_offspring类</p>
<p>p标签无类</p>

	
p.test_offspring{
	color:red;
}