css adjacent sibling selector: select another element immediately behind the element, and both have the same parent element.
For example: If you want to increase the paragraph immediately appear in the margin on h1 elements:
h1 p { margin-top:50px;}
And "" selector is very confusing "~" selector: The selector's role is to find all the siblings behind one of the specified element.
Specific examples are as follows:
HTML:
<body>
<div class="box">
<h1>标题</h1>
<p class="p1">段落一的文字</p>
<p class="p2">段落二的文字</p>
<p class="p3">段落三的文字</p>
<p class="p4">段落四的文字</p>
</div>
</body>
When css code as follows:
.box h1 p {color:red;}
The resulting page style:
When the css code:
.box h1 ~ p {color:red;}
Page style were as follows: