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

1.link標(biāo)簽 外部樣式表

。
media屬性，這里使用的值為all,說(shuō)明這個(gè)樣式表要應(yīng)用于所有表現(xiàn)的媒體。CSS2為這個(gè)屬性定義很多可取值。all:用于所有表現(xiàn)媒體。

2.alternate 候選樣式表

候選樣式表——將rel設(shè)置為alternate stylesheet，就可以定義候選樣式表，只有在用戶選擇這個(gè)樣式才會(huì)用于文檔表現(xiàn)。

3.style 內(nèi)部樣式
4.@import
@import命令必須放在style容器中

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

用戶!important>開(kāi)發(fā)者!important>開(kāi)發(fā)者>用戶>瀏覽器默認(rèn)

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

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

3.id選擇器

#mostImportant{color:red;}



這個(gè)選擇器的規(guī)則會(huì)和各個(gè)元素匹配（這些元素不能在同一個(gè)文檔中出現(xiàn)）

4.通配符選擇器 *

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

a[href] 選取包含href屬性的a標(biāo)簽。

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

        .info[ref="good"]

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

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

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

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

下面是css3提供的選擇器：

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

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

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

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

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

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

1.錨偽類

a:link {color: red}    /* 未訪問(wèn)的鏈接 */
a:visited {color: green}    /* 已訪問(wèn)的鏈接 */
a:hover {color: blue}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: yellow}    /* 選定的鏈接，鼠標(biāo)左擊不放 */

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

note:

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

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

:link 和 :visited 稱為鏈接偽類，只能應(yīng)用于錨元素；
:hover、:active 和 :focus 稱為動(dòng)態(tài)偽類，理論上可以用于任何元素。

2.與input有關(guān)

:focus 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。

下面是css3提供的選擇器：

:enabled 可用的輸入元素。

:disabled 不可用的輸入元素。

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

3.結(jié)構(gòu)偽類

    
列表項(xiàng)一
    
列表項(xiàng)二
    
列表項(xiàng)三
    
列表項(xiàng)四

E:first-child 是用來(lái)選擇父元素的第一個(gè)子元素E，但是它必須為父元素的第一個(gè)子元素，不然會(huì)失效
如果我們要設(shè)置第一個(gè)li的樣式，那么代碼應(yīng)該寫成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相關(guān)的偽類都如此。

下面是css3提供的選擇器：

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

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

E:first-of-type 匹配同類型中的第一個(gè)同級(jí)兄弟元素E

E:last-of-type 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E

E:only-of-type 匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E

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

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

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

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

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

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

E:empty 匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素E

4.否定類
E:not(s)用于匹配不含有s選擇符的元素E，說(shuō)起來(lái)不好理解，那么說(shuō)一個(gè)最常用的開(kāi)發(fā)場(chǎng)景，假如我們要對(duì)ul元素下的所有l(wèi)i都加上一個(gè)下邊框用于內(nèi)容分割，但是最后一個(gè)不需要，如下：

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

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

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

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

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元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中。

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

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

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