参考原文: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的
