css筆記3

• CSS 多類選擇器,通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

  <p class="important warning">
  This paragraph is a very important warning.
  </p>.important {font-weight:bold;}
  .warning {font-style:italic;}
  .important.warning {background:silver;}  //同時包含這兩個類

  ?

• 類選擇器和id選擇器的區別：

  只能在文檔中使用一次，與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。

  ?不能使用 ID 詞列表，不同于類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

  ?

• 根據部分屬性值選擇:

  如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

  假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：

  p[class~="important"] {color: red;}

  ?

• 部分值屬性選擇器與點號類名記法的區別: ??p.important 和 p[class="important"] 應用到 HTML 文檔時是等價的。為什么還要有 "~=" 屬性選擇器呢？因為它能用于任何屬性，而不只是 class。

• 選擇器	描述
  [attribute]	用于選取帶有指定屬性的元素。
  [attribute=value]	用于選取帶有指定屬性和值的元素。
  [attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
  [attribute|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
  [attribute^=value]	匹配屬性值以指定值開頭的每個元素。
  [attribute$=value]	匹配屬性值以指定值結尾的每個元素。
  [attribute*=value]	匹配屬性值中包含指定值的每個元素。

• 在后代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”，但是要求必須從右向左讀選擇器。

• 偽類的語法：

  selector : pseudo-class {property: value}
  
  

  selector.class : pseudo-class {property: value}  //類與偽類搭配使用

  注釋：必須聲明?<!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。

• 偽元素的語法：

  selector:pseudo-element {property:value;}

  ?

• CSS2 - :before 偽元素

  h1:before{content:url(logo.gif);}

  ?

• 使用 margin 屬性來水平對齊. ? ? ?注釋：除非已經聲明了 !DOCTYPE，否則使用 margin:auto 在 IE8 以及更早的版本中是無效的。