CSS adjacent sibling selectors

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:

 

Published an original article · won praise 2 · views 10000 +

Guess you like

Origin blog.csdn.net/u011927449/article/details/104031796