參考原文:The 30 CSS Selectors You Must Memorize

第一類 ie7+兼容，無需考慮隨便用

1.link,visted

a:link { //link偽類作用于未點擊過的鏈接標簽
color: red;
}
a:visted { //a:visted 偽類作用于未點擊過的鏈接標簽
color: purple;
}
** : 和::區別 在要兼容ie8時用:因為ie8不識別:: 不用兼容::較好

#####2.+
> 相鄰選擇器，上述代碼中就會匹配在ul后面的第一個p，將段落內的文字顏色設置為紅色。

ul + p {
color: red;
}

#####3.~
>相鄰選擇器，與前面提到的X+Y不同的是，X~Y匹配與X相同級別的所有Y元素，而X+Y只匹配第一個

ul ~ p {
color: red;
}

#####4.屬性選擇器
>```
a[title] {
      color: green;
}
a[href^="http"] {
      padding-left: 10px;
}

5.X::pseudoElement

值得一提 兼容ie6+

p::first-letter {
      float: left;
      font-size: 2em;
      font-weight: bold;
      font-family: cursive;
      padding-right: 2px;
} //p的第一個字
p::first-line {
      font-weight: bold;
      font-size: 1.2em;
}//p的第一行樣式

6. X:first-child

ul > li:first-child {
border-bottom:none;
}

### 第二類 ie9+ 
#####1. X:not(selector)
> ```
div:not(#container) {
      color: blue;
}

2.X:nth-child(n)

li:nth-child(3) {
color: red;
} //第三個 類似eq(2)
tr:nth-child(2n) {
background-color: gray;
}//偶數行

#####3. X:nth-last-child(n)
>```
 li:nth-last-child(2) {
      color: red;
 }//倒數第二個

4. X:last-child

ul > li:last-child {
border-bottom:none;
}

#####5. X:only-child 
>```
div p:only-child {
      color: red;
 }//匹配的是div下有且僅有一個p的