CSS選擇器 < ~ +

1.>（子選擇器）

#a>p{　　 // 使用 > 號，讓選擇器選擇id="a"的所有子類（直接子類）

<div id="a">
    <p>11111111111111</p>
    <p>22222222222222</p>
    <div>
　　　　<p>333333333</p>
　　</div><!--該<p>在<div>中-->
</div>

<style> #a>p { background-color:Red; 
            }
    </style>

結果：

 

2.+（相鄰選擇器）

h1+p，選擇緊接在另一個元素后的元素，而且二者有相同的父元素。只會選擇第一個相鄰的匹配元素。

<div id="a">
    <h1>11111111111111</h1>
    <p>22222222222222</p>
    <p>33333333333333</p><!--只會選擇第一個相鄰的匹配元素-->
    <div>
      <p>44444444444</p>
    </div>
</div> h1+p { background-color:Red; }

結果：

 

3.~(匹配選擇器)

#b~p，匹配所有在#b元素之后的同級p元素。

 

<style> h1~p { background-color:Red; 
            }
</style>


<div id="a">
    <h1>11111111111111</h1>
    <p>22222222222222</p>
    <p>33333333333333</p>
    <div>
      <p>44444444444</p>
    </div>
</div>

 

所有相匹配的P元素都被選擇到。

 

 

結果：