伪类和伪元素，以及一些应用

日常中尽量使用伪类去替代一些js的使用

区别

伪类：1.表示被选择元素的某种状态，例如 :visited, :active

​ 2.满足一定条件的DOM树中的元素，例如 :first-child, first-of-type（相当于一个特殊的class选择器）

伪元素：不以元素为最小选择单元，二十选择元素的指定内容，例如 ::before表示选择元素内容的之前内容，::selection表示选择元素被选中的内容（相当于一个特殊的span）

核心区别在于，是否创造了“新的元素”

:before和::before的区别

1. 二者写法是等效的，都表示伪元素
2. :before是CSS2的写法，::before是CSS3的写法
3. :before的兼容性比::before兼容性好，但是H5开发中建议使用::before

注意：

1. 伪元素要配合content属性一起使用
2. 伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3. 伪元素的特效通常要使用:hover伪类样式来激活

.test:hover::before { /* 这时animation和transition才生效 */ }  

伪元素

伪类

奇技淫巧

双边丝带

<div class="tc">
    <div class="title1"><span>距离结束还有10天</span></div>
</div>

分别用两个before和after做出两个矩形即可

Tabs底部伸缩激活

用before从left:50% width:0 => left:0 width:100%

Tooltip提示