2017/3/2 CSS學習部分總結

CSS選擇器樣式：
選擇器{
樣式程式碼... ...；
}

常用選擇器：

1. 標籤選擇器
   格式：標籤{ ... ... }

2. 類選擇器
   . 類名{ ... ...} //可以用多個類選擇器

3. ID選擇器

   ID名{... ...} //一個html中只能用一次

   例如：

   下面程式碼是正確的：
   
   三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。
   而下面程式碼是錯誤的：
   
   三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。

4. 子選擇器
   標籤元素1>標籤元素2{ ... ...} //標籤1的後一個

5. 後代選擇器（包含選擇器）
   標籤元素1 標籤元素2{ ... ...} //所有標籤2的內容
   總結：>作用於元素的第一代後代，空格作用於元素的所有後代

6.偽類選擇器
a:hover{ ... ... } //要考慮瀏覽器的相容性問題

7.分組選擇器
標籤1，標籤2，...{ ... ...} //同時為幾個標籤設定相同的樣式

8.通用選擇器
*{ ... ...}

------------------------------------俺滴小分割^_^ ---------------------------------------

• 對於瀏覽器來說，對CSS樣式的載入時採用就近原則的，及內聯式>嵌入式>外部式

• 在CSS樣式中，先解析哪種樣式，是透過各選擇器的權值，一般，類選擇器的權值為10， 標籤選擇器為1，ID選擇器最高為100，繼承（CSS中有些樣式可以繼承）最低，0.1。

  p{color:red;} /*權值為1*/
  p span{color:green;} /*權值為1+1=2*/
  .warning{color:white;} /*權值為10*/
  p span.warning{color:purple;} /*權值為1+1+10=12*/
  #footer .note p{color:yellow;} /*權值為100+10+1=111*/

• 對於一些樣式，要想它最先被解析，可設定為！important
  例如：
  p{ color : red !important; }