CSS快速入門-組合選擇器
阿新 • • 發佈:2018-05-13
空間 組合選擇器 lin -s css 註意 color 選擇器 AD
<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、塊級元素與塊級元素並列、內聯元素與內聯元素並列。
CSS快速入門-組合選擇器