CSS基本語法與選取器

以下資料是由2010年初舊部落格上的文件轉貼過來的.........

了解CSS樣式規則的基本語法結構&認識選取器

選取器  {
　　　屬性：設定值；
　　　屬性：設定值；
}

例如：

選取器有4種類型：

(一) 標籤

例如頁面上有3個表格
新增CSS樣式規則→選取器類型：table→設定如下→結果所有的表格皆受影響

(二) 類別------套用在選擇這個類別的元素上

新增CSS樣式規則==>選取器類型：類別, 自行輸入類別名稱, 例如「sptable1」
設定如下
例如：第1個表格及第3個表格選擇套用了這個類別樣式
結果選擇套用的表格會受影響, 而呈現出這個樣式的結果
類別樣式的規則名稱以「.」開頭, 可以套用在任何網頁元素上

(三) ID------套用在相同ID名稱的元素上

通常是先將網頁元素設定好 ID 名稱, 例如：第1個表格設定ID名稱「tableABC」
新增CSS樣式規則==>選取器類型：ID, 名稱為#tableABC==> 設定如下
結果ID名稱為tableABC的表格即呈現出#tableABC的樣式結果
ID樣式的規則名稱以「#」開頭, 只套用在ID名稱相同的網頁元素上

(四) 複合------套用在2個階層以上指定位置的元素上

例如：游標點選第1個表格 (ID名稱為tableABC) 中的<td>標籤
新增CSS樣式規則==>選取器類型：複合, 名稱為#tableABC td==> 設定如下
結果只有ID名稱為tableABC的第1個表格的儲存格被套用樣式結果 (高度35px)

※ 優先權：複合 > ID > 類別 > 標籤

例如第1個表格, 一開始它是一個<table>標籤, 因此呈現出table標籤樣式的結果
接著套用了.sptable1 類別樣式, 因此呈現了類別樣式的結果
最後設定了ID名稱, 結果即呈現出ID樣式的結果