（一）CSS关系选择器

为什么80%的码农都做不了架构师？>>>   

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浏览器展示效果：

转载于:https://my.oschina.net/hpuwxy/blog/747739