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>

巴特西

css + 和 ~的区别

最新文章

热门文章