谈谈css的伪类和伪元素

前言

明天就要放假了，今天可能是春节前的最后一篇博客。首先谢谢2014年大家对我博客的关注，祝大家羊年万事如意！关于2014年总结，我就不公开了，总之，2014年学到了很多，感谢兴安得力给我自由的学习平台！关于2015年，一切都是新的，首先是生活方式的改变，尽量坚持瑜伽健康的生活方式。工作是新的，在新公司努力工作，实现自我价值。2015年继续在前端深造的同时，多多学习学习后端的知识。好了，言归正传，今天主要谈谈css的伪类和伪元素。其实，关于伪类和伪元素，我在小工具CSS 选择器演示 中，写了不少伪类和伪元素，大家可以去看一下！

伪类和伪元素的理解

官方解释

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

我自己的理解：

伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。

伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。

另外一个简单的理解和区分就是：

伪类前面是一个冒号，为元素前面是两个冒号。E:first-child 伪类，E::first-line为元素。

特殊情况::before 和 ::after 伪元素

before 和after是在元素前面和后面添加一些元素，因此是伪元素，CSS3选择器中已经将其前面变为两个冒号了。请看：w3cselect

问题来了，那么为什么我们平时用before和after前面就一个冒号？

当你看了css2选择器就知道了，老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大家注意了，往后在写css3的时候，为元素要用两个冒号，伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果，讲了一些。

像伪元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder 

::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果！

html

<a href="#">haorooms</a>

css

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }

其中content中可以用attr也可以用url

例如：

a：:after { content:"(" attr(href) ")"; } 
h1::before { content: url(logo.png); }  

伪类中用的最多的要数：nth-child()选择器了，关于nth-child()，我之前有篇文章介绍过。

http://www.haorooms.com/post/css3_nth-child

具体大家可以去看一下！