css关系选择符

记录一下初学前端的小白对css中的关系选择符的理解

1.包含选择符（E F）：将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

<style>
	/* 包含选择符(E F) */
	.demo div { border:1px solid #f00; }
	/* 子选择符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>

此例，如果是包含选择符，那么 0, 1, 2, 3 都有边框；如果是子选择符，那么只有 0 有边框，即只有子元素会被命中；

2.子选择符(E>F)：与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

.demo > div {
	position: relative;
}

<div class="demo">
	<div class="a">
		<div class="b">子选择符</div>
	</div>
</div>

 此例只有 .a 会被命中，因为它是 .demo 的子元素；

3.兄弟选择符（E~F）：选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。

<style>
	h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<div>
	<p>p2</p>
	<p>p3</p>
</div>

 这个例子中，只有 p1 会被选中；p2和p3 由于与 h3 并不是同级，所以不会被选中；

 

<style>
	h3 ~ p { color: #f00; }
</style>
<p>p0</p>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

 这个例子中，p1/p2/p3 都会被选中；而 p0 因为在 h3 之前，所以不会被选中；

<style>
	/* 相邻选择符(E+F) */
	h3 + p { color: #f00; }
	/* 兄弟选择符(E~F) */
	h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

 这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色。

4.相邻选择符（E+F）：与兄弟选择符（E~F）相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。

<style>
	/* 相邻选择符(E+F) */
	h3 + p { color: #f00; }
	/* 兄弟选择符(E~F) */
	h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色