css的奇怪选择器

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