萬用Selector

* 表示 "anything", 如果指定 * {color: green;}
則所有文字都會變綠色（指定了其他規則者除外）

它有一個有趣的用法，可作為子selector的相反，例如：
p * em {font-weight: bold;}
表示會影響任何身為p tag之孫selector的em tag內容物，p tag的子selector為何並不重要，但如果em為p的子selector則其內容物並不受影響。

Class與ID

運用Class與ID可以針對文件的特定區域進行樣式設定

<h1 class="specailtext">This is a heading with the <span >same class</span> as the second paragraph</h>

<p>This tag has no class.</p>
<p class="specialtext">When a tag has a class attribute, we can target it <span>regardless</span> of its position in the hierachy.</p>

如果希望selector影響的範圍更局限在某一條件下, 可以將標籤名稱再結合class名稱(tag+class), 例如:
p.specialtext {color: red;}
則只有第三段的文字變成紅色。

若再加入另一個selector則可指定得更細 (tag+class+tag), 例如:
p.specialtext span {font-style: italic;}
則第三段內span標籤內的字還會變成斜體。

ID的使用放式與Class類似，只是它是以#來表示，例如：
#uniquetext {font-weight: bold;}
<p id="uniquetext">This is the special text</p>

Class與ID的差異
Class可以重複出現很多次，而一個特定的ID則只能在一個頁出現一次。
Class好比西洋棋中的士兵，而ID就像皇后。

Class與Id雖然好用，但小心不要用度使用，否則會落到如同Font tag般的下場。

CSS的規則

CSS的規則基本上由二個成份組成：selector {declartion}
例如：p {color: red}
則所有套用<p>標籤的內容皆會變成紅色。

此規則又可延伸如下：

1. 在一個規則中可包含多重的declaration，例如：
   p {color:red; font-size:12px; line-height:15px;}
2. 多個selectors也可以組合在一起，例如：
   h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
3. 多種規則也可以套用到同一個selectors上，例如：
   h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
   h3 {font-style: italic;}

span與div都屬於neutral container，也就是說它們都沒有預設的屬性：換言之，在指定特定樣式之前，span對你的markup都沒有影響。
span與div的差異：div為區塊元素，會強迫換行，而span則為行內元素，不會強迫換行。

strong會產生粗體字，em則會產生斜體字。

透過Contextual Selectors，可以縮小樣式指定的範圍，例如：
div p {color: red;}
則只有在div之內的p標籤的內容會變成紅字

還可以像以下：
p span em{color: green;}
則只有在p段落中，span標籤中，在em標籤內的內容才會變成綠色。
最接近 {declaration}的標籤中的內容，才會受影響，其前面的tag只是用來指定其影響範圍而已。

Child Selectors
可用來指定一標籤規則必須是某一個標籤的children，用法如下：
p>em {color: green;}
但此規則目前IE不適用。