CSS关系选择符和元素选择器

CSS 元素选择器

选择符	名称	版本	描述
*	通配选择符	CSS2	所有元素对象
E	类型选择符	CSS1	以文档语言对象类型作为选择符。
E#myid	myid选择符	CSS1	以唯一标识符id属性等于myid的E对象作为选择符
E.myclass	myclass选择符	CSS1	以class属性包含myclass的E对象作为选择符

CSS关系选择符

1包含选择：
E F，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子。
2子选择符
E>F，选择所有作为E元素的子元素F。
 与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。
demo：

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

3相邻选择符
E+F：选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
4兄弟选择符
E~F：选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级别。
 与 相邻选择符(E+F) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
demo

<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 都会变成红色；