（一）CSS关系选择器

摘要: css3、关系选择器

CSS中关系选择器包括5大类，分别为：

1.多元素选择器（A，B）：同时对A，B元素定义相同的样式，这样可以省去分别去定义A，B而得到相同的效果。

2.后代元素选择器（A B）：B和A是嵌套关系，且B是A的后代（儿子，孙子，重孙子……都无所谓）。

3.子元素选择器（A > B）：B和A是嵌套关系，且B是A的儿子。

4.毗邻后兄弟选择器（A + B）：B和A是同级关系，且B是A的下一个相邻的元素。

5.同级后兄弟选择器（A ~ B）：B和A是同级关系，且B是A的下面相邻的一个或多个元素。

下面为CSS代码演示：

<style>
div{border:1px solid red;}
div+p{font-size:80px;}
</style>
<p>人生0</p>
<div>
黄金时代
<p>活着</p>
<h1>
<p>平凡的世界</p>
</h1>
</div>
<p>人生1</p>
<p>人生2</p>
<p>人生3</p>
<p>人生4</p>

Chrome浏览器展示效果：