30-CSS-04-CSS(關聯選擇器&組合選擇器)
阿新 • • 發佈：2018-12-26
【關聯選擇器】
標籤是可以巢狀的，要讓相同標籤中的不同標籤顯示不同樣式，就
可以用此選擇器。
【程式碼】
<head> <style type="text/css"> span b{ /*關聯選擇器——選擇器中的選擇器*/ background-color:#09F; color:#FFF; } </style> </head> <body> <div>一個div的<b>區域</b></div> <span>一個span的<b>區域</b></span> </body>
【效果】
<b>標籤是加粗，程式碼中用關聯選擇器將<span>中的<b>標籤樣式改變，而<div>中的<b>標籤樣式不變仍是加粗。
【解釋】
span b{}就是<span>中的<b>標籤，如下程式碼：
span b a img{}
<span>中的<b>中的<a>中的<img>標籤樣式為……
============================================================================================================
【組合選擇器】
對多個不同選擇器進行相同樣式設定的時候應用此選擇器。
p,div { color:#FF0000;}
<p>p標籤顯示段落。</p>
<div>DIV標籤顯示段落</div>
注：多個不同選擇器要用逗號分隔開。
【程式碼】
<head> <style type="text/css"> .haha,div b{ background-color:#000; color:#C00; } </style> </head> <body> <div>一個div的<b>區域</b></div> <span class="haha">一個span的<b>區域</b></span> <span>一個span的<b>區域2</b></span> </body>
【效果】
“一個div的區域”中“一個div的”正常字型，“區域”黑底紅字且加粗；
“一個span的區域”黑底紅字且“區域”加粗，“一個span區域2”中的“一個span的”正常字型，“區域2”加粗。
【解釋】
組合選擇器.haha,div b{}表示凡是帶有class="haha"和<div>中的<b>標籤都改為該樣式，前者.haha是一個選擇器，後者div b是一個
選擇器，將二者結合成為一個組合選擇器。