~ VS. +

• A ~ B means All B after A
• C + D means D immediately after C.

Example code:

<style>
.a ~ .b {background:red;color:#fff;}
.c + .d {background:blue;color: #fff;}
</style>

<p class="a">1111</p>
<p class="b">1111</p>
<p class="b">1111</p>
<p>other p</p>
<p class="b">1111</p>
<ul>
    <li class="b">this is li</li>
</ul>
<p class="b">after list</p>

<p class="c">1111</p>
<p class="d">1111</p>
<p class="d">1111</p>
<p>222</p>
<p class="d">1111</p>

The resule:

---

• this is li

---

:target

the Code

<style>
:target {background:purple;color:#fff;}
</style>
<a href="#test_target">click here</a>
<div id="test_target">see browser location bar:......#test_target</div>