參考原文:The 30 CSS Selectors You Must Memorize
第一類 ie7+兼容音同，無需考慮隨便用
1.link,visted
a:link { //link偽類作用于未點擊過的鏈接標簽
color: red;
}
a:visted { //a:visted 偽類作用于未點擊過的鏈接標簽
color: purple;
}
** : 和::區(qū)別 在要兼容ie8時用:因為ie8不識別:: 不用兼容::較好
#####2.+
> 相鄰選擇器仔沿，上述代碼中就會匹配在ul后面的第一個p走孽，將段落內(nèi)的文字顏色設(shè)置為紅色。
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;
}//偶數(shù)行
#####3. X:nth-last-child(n)
>```
li:nth-last-child(2) {
color: red;
}//倒數(shù)第二個
4. X:last-child
ul > li:last-child {
border-bottom:none;
}
#####5. X:only-child
>```
div p:only-child {
color: red;
}//匹配的是div下有且僅有一個p的
