下面这个链接谢了好多伪类, 伪元素用法: https://developer.mozilla.org/en-US/docs/web/CSS/::before
单冒号叫伪类是 css2 的写法, 要求低版本兼容时可以用这个写法, 双冒号叫伪元素是 css3 新写法, 兼容主流浏览器;
1: 伪类用于向某些选择器添加特殊的效果.
2: 伪元素用于将特殊的效果添加到某些选择器.
- p>i:first-child {color: red}
- <p>
- <i>first</i>
- <i>second</i>
- </p>
也可以这样:
- .first-child {color: red}
- <p>
- <i class="first-child">first</i>
- <i>second</i>
- </p>
即不使用伪类的时候我们可以给他一个类实现; 在看伪元素的:
- p::first-letter {color: red}
- <p>I am stephen lee.</p>
- .first-letter {color: red}
- <p><span class='first-letter'>I</span> am stephen lee.</p>
可以看到达到相同效果, 需要加一个标签 span;
总结: 伪类的效果可以通过添加一个实际的类来达到, 而伪元素的效果则需要通过添加一个实际的元素才能达到, 这也是为什么他们一个称为伪类, 一个称为伪元素的原因.####
来源: http://www.qdfuns.com/article/16039/e016aa9ec47b299c6f01366fa6042d7d.html