02 Selector

簡介


選擇器(Selector)主要分為三類：Type、Class、ID。

宣告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