CSS快速入門-組合選擇器

<div class="gradefather"> hello1
　　<div class="father">hello2
　　　　<p class="son">hello4</p>
　　</div>
　　<p>hello3</p>
　　<p>hello5</p>
</div>

 

一、A，B :任意選擇器 A or B

div,p {    #所有div或者p標簽
font-size:10px;
color:blue;
}

 

二、A B：后代選擇器，A 標簽下的所有B

div p { #div下所有p標簽
font-size:20px;
color:green;
}

 

三、A>B：子選擇器,僅僅兒子級別會選中.

gradefather>p {#gradefather的子標簽，僅hello3 hello5 會作用
font-size:20px;
color:red;
}
.father>p {#father的子標簽，僅hello4 會作用
font-size:20px;
color:red;
}

 

四、A+B：毗鄰選擇器，僅僅相鄰的同級別（兄弟sibling）第一個會選中.

father+p { #father的第一個鄰居，僅僅hello3會作用
font-size:20px;
color:green;
}

 

注意：
1、塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。塊級標簽默認占一行，內聯標簽占內容大小的空間。
2、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li內可以包含div
4、塊級元素與塊級元素並列、內聯元素與內聯元素並列。