摘要：通用兄弟選擇器通用兄弟元素選擇器是新增加一種選擇器，用于選擇某元素后面的所有兄弟元素。

1.link標簽 外部樣式表

。
media屬性，這里使用的值為all,說明這個樣式表要應用于所有表現的媒體。CSS2為這個屬性定義很多可取值。all:用于所有表現媒體。

2.alternate 候選樣式表

候選樣式表——將rel設置為alternate stylesheet，就可以定義候選樣式表，只有在用戶選擇這個樣式才會用于文檔表現。

3.style 內部樣式
4.@import
@import命令必須放在style容器中

（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載.所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（**無樣式內容閃爍問題**），網速慢的時候還挺明顯。
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，存在兼容性問題。而link是XHTML標簽，無兼容問題;
 (4) 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
 

用戶!important>開發者!important>開發者>用戶>瀏覽器默認

1.元素選擇器
2.類選擇器

 p.warning  匹配class為warning的所有p元素

3.id選擇器

#mostImportant{color:red;}



這個選擇器的規則會和各個元素匹配（這些元素不能在同一個文檔中出現）

4.通配符選擇器 *

[attribute] 選取包含某屬性的元素。

a[href] 選取包含href屬性的a標簽。

[attribute=value] 選擇某個屬性attribute并且屬性值為value的元素。這種格式要求必須與屬性值完全匹配，如果遇到的值本身包含一個用空格分隔的值的列表，匹配就會出問題。

        .info[ref="good"]

[attribute~=value] 該選擇器定位具有屬性 attr 且屬性值為 完整 "val" 的任何元素 A：

  div[title~="english"] {color:#f88;} 
  /* title="english" 以及 title="chinese english" */

[attribute|=value] 定位具有屬性 attr 且屬性值為 val，或以 "val-" 開頭 的任何元素 A：

  p[class|="a"] {color:#333;} 
  /* class="a" 以及 class="a-b"） */ 

下面是css3提供的選擇器：

A[attr^="val"]：定位具有屬性 attr 且屬性值 以 "val" 開頭 的任何元素 A：

 div[class^="a"] {color:#666;} 
  /* class="a"、class="abc" 以及 class="abc zzz" */
  /* 但 class="zzz abc" 不是 */
      

A[attr$=val]：該選擇器與 A[attr^=val] 正好相反，定位具有屬性 attr 且屬性值 以 "val" 結尾 的任何元素 A：

  div[class$="a"] {color:#f00;}
  /* class="nba"、class="cba" 以及 class="cn cba" */
  /* 但 class="cba cn" 不是 */

A[attr*="val"]：定位具有屬性 attr 且屬性值任意位置 包含 "val" 字符串 的元素 A，val 可以是一個完整的單詞，也可以是一個單詞中的一部分：

  a[title*="link"] {text-decoration:underline;} 
  /* title="aaalinkzzz" */

1.錨偽類

a:link {color: red}    /* 未訪問的鏈接 */
a:visited {color: green}    /* 已訪問的鏈接 */
a:hover {color: blue}    /* 鼠標移動到鏈接上 */
a:active {color: yellow}    /* 選定的鏈接，鼠標左擊不放 */

最可靠的記憶順序就是遵循愛恨原則：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來概括。

note:

在 CSS 定義中，:hover 必須被置于 :link 和 :visited 之后，才是有效的。

在 CSS 定義中，:active 必須被置于 :hover 之后，才是有效的。

:link 和 :visited 稱為鏈接偽類，只能應用于錨元素；
:hover、:active 和 :focus 稱為動態偽類，理論上可以用于任何元素。

2.與input有關

:focus 向擁有鍵盤輸入焦點的元素添加樣式。

下面是css3提供的選擇器：

:enabled 可用的輸入元素。

:disabled 不可用的輸入元素。

:checked 匹配被選中的元素。 (只有Opera支持)

3.結構偽類

    
列表項一
    
列表項二
    
列表項三
    
列表項四

E:first-child 是用來選擇父元素的第一個子元素E，但是它必須為父元素的第一個子元素，不然會失效
如果我們要設置第一個li的樣式，那么代碼應該寫成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相關的偽類都如此。

下面是css3提供的選擇器：

E:last-child 匹配父元素的最后一個子元素，E必須是父元素的最后一個子元素

E:only-child 匹配父元素僅有的一個子元素E

E:first-of-type 匹配同類型中的第一個同級兄弟元素E

E:last-of-type 匹配同類型中的最后一個同級兄弟元素E

E:only-of-type 匹配同類型中的唯一的一個同級兄弟元素E

    first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。
    :first-of-type 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了。

E:nth-child(n) 匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效

E:nth-last-child(n) 匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效

   E:nth-child(n) 和 E:nth-last-child(n)
   該選擇符允許使用一個乘法因子(n)來作為換算方式，如下:
   (1) 選擇第幾個標簽，“2可以是你想要的數字，最小從1開始”
       li:nth-child(2) { background:#fff}
   (2) 選擇大于等于4標簽，“n”表示從整數
       li:nth-child(n+4) { background:#fff}
   (3) 選擇小于等于4標簽
       li:nth-child(-n+4) { background:#fff}
   (4)選擇偶數標簽，2n也可以是even
      li:nth-child(2n) { background:#fff}
      li:nth-child(even) { background:#fff}
   (5)選擇奇數標簽，2n-1也可以是odd
      li:nth-child(2n-1) { background:#fff}
      li:nth-child(odd) { background:#fff}

E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E

E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E

E:empty 匹配沒有任何子元素（包括text節點）的元素E

4.否定類
E:not(s)用于匹配不含有s選擇符的元素E，說起來不好理解，那么說一個最常用的開發場景，假如我們要對ul元素下的所有li都加上一個下邊框用于內容分割，但是最后一個不需要，如下：

ul li:not(:last-child) {
    border-bottom: 1px solid #ffffd;
}

1.E:first-letter 選擇文本塊的第一個字母
2.E:first-line 選擇元素的第一行
3.E:before 在元素前面插入內容，配合"content"使用
4.E:after 在元素后面插入內容，配合"content"使用

以上四個偽元素選擇器在CSS2.1都已經被支持，但在CSS3中將偽元素選擇符前面的單個冒號(:)修改為雙冒號(::)，如E::first-letter、E::first-line、E::before、E::after，不過之前的單冒號寫法也是有效的。

5.E::selection
E::selection用于設置文本被選擇時的樣式，被定義的樣式屬性有3個，而且使用時需要對火狐瀏覽器多帶帶設置。

p::-moz-selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}

后代選擇器E F
后代選擇器是最常使用的選擇器之一，它也被稱作包含選擇器，用于匹配所有被E元素包含的F元素，這里F元素不管是E元素的子元素或者是孫元素或者是更深層次的關系，都將被選中。

子元素選擇器E > F
子元素選擇器只能選擇某元素的子元素，這里的F元素僅僅是E元素的子元素才可以被選中

相鄰兄弟元素選擇器E + F
相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，但是他們必須有一個相同的父元素。比如E元素和F元素具有一個相同的父元素，而且F元素在E元素后面，這樣我們就可以使用相鄰兄弟元素選擇器來選擇F元素。

通用兄弟選擇器E ~ F
通用兄弟元素選擇器是CSS3新增加一種選擇器，用于選擇某元素后面的所有兄弟元素。它和相鄰兄弟元素選擇器用法相似，但不同于前者只是選擇相鄰的后一個元素，而通用兄弟元素選擇器是選擇所有元素。