css + 和 ~的区别

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

　　+ 加选择器

如果要选择紧接在一个元素后的另一个元素，而且二者有相同的父元素。可以使用相邻兄弟选择器。

这里面的 + 只会影响下一个p标签的样式，不会影响上一个 p 标签的样式。

 

        ~选择器 

目的是查找某一个元素后的所有节点

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>

<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>