【CSS】伪类和伪元素选择器

伪类

基于当前元素所处的状态或具有的特性，用于设置元素自身的特殊效果。

1. a：link  规定所有未被点击的链接；

2. a：visited  匹配多有已被点击过的链接；

3. a：active  匹配所有鼠标按下未松开的元素；

4. a：hover  匹配所有鼠标移入/悬停在元素上的元素；

5. ：focus  被选中的元素；

6. ：first-child 元素的第一个子元素；

7. ：lang允许创作者来定义指定元素中使用的语言；

伪类的规定：

由于css的优先级问题，下面四个伪类需要按顺序书写，否则会出现问题

L（link）V（visited）H（hover）A（active）

love  and  hate（爱与恨）

伪类hover的拓展：

1. E：hover{} 对自身产生影响；
2. E：hover  F{} 对子元素F产生影响(当F需要隐藏时)
3. E：hover + F{} 对兄弟元素产生影响；

一定要注意用E元素的伪类设置效果的作用对象跟E元素的关系（自身、子元素、兄弟元素）然后使用对应的选择器设置。

伪元素

基于元素的抽象，它跟伪类的区别就是它依赖于元素，其自身可作为一个抽象的元素来使用，行内元素，伪元素使用时要用两个冒号，但为兼容IE只写一个冒号。

1. ：：before   元素之前

2. ：：after  元素之后  

3. ：：first-letter  文本的首字母

4. ：：first-line  文本的首行

伪元素清除浮动：clearfix类

.clearfix{
      content: '';
      display: block;
      clear:both;      
}    

.clearfix{zoom: 1;}/*兼容IE*/

伪元素设置小三角形：

如上图，消息提示框上前面的小三角形即为伪元素设置，代码如下：

.tips{/*消息框*/
        position: relative;
        width: 180px;
        padding: 10px;
        background-color: #56A9D3;
        border-radius: 4px;
    }

.tips:before{
　　　　　/*相对于消息框设置位置*/
　　　　　position: absolute;
        top: 30%;
        left: -20px;
        content: "";
        width: 0px;
        height: 0px;
        border: 10px solid transparent;/*用border的颜色来设置三角形显示，三边透明*/
        border-right-color: #56A9D3;
    }        

一定要注意伪元素需要设置content之后才会显示出来，content: '';设置后才是真正的插入一个内容，即便为空也要设置。