02 Selector

簡介


選擇器(Selector)主要分為三類:TypeClassID

宣告CSS樣式語法如下:

選擇器 {

    屬性:設定值;

}


舉例來說,若要設定一個元素內的文字是紅色的並且為<h1>格式大小,那就用以下方式設定:

h1 {
     color:red;
    }

<h1>紅色</h1>


Grouping

如果有多個以上選擇器擁有相同的樣式同時被宣告,這叫做Grouping。舉例來說,如果<h2>,<h3>格式大小都會有相同的樣式為紫色,那就用以下方式設定:


h2,h3 {
color:purple;
}

<h2>H2 Grouping</h2>
<h3>H3 Grouping</h3>


後代選擇器 Descendant Selectors

若甲元素在乙元素之內時,甲元素才會用指定式呈現。若甲元素不在乙元素內的話,那甲元素就可以有其它的樣式。


父選擇器  子選擇器 {

    屬性:設定值;

}


以下範例,<li> <b>之內的文字是黃色的。若不是在<li>之內的<b>中的文,就不會出現套用的樣式。

li b {
     color:yellow;
     }

<li><b>Descendant Selectors</b></li>
<b>Not Descendant Selectors</b>












Comments