伪元素写竖线_CSS的伪类和伪元素

之前介绍了8种选择器,基本上可以应对大部分的开发需求，但是如果不会使用伪类和伪元素，就跟下面的图差不多，后面会摔的。伪元素和伪类虽然不是特别常用，但是，很好用，可以帮你省掉很多无用功，效果还好。下面直接进入正题，尽量用最小的篇幅让人明白如何使用它们。

...

1.伪元素和伪类的区别

伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致。

伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自己虚拟的元素添加样式。

已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。比如虚拟一个div

声明不同，伪类和选择器之间用一个冒号隔开，伪元素则是两个冒号隔.

2.常用的伪类

常用的伪类有两类UI伪类和结构伪类。这里只介绍5个，应该足够用了。

2.1.hover和active

这两个属于UI伪类(link/visited/active/hover)四个中的其中两个，hover指当鼠标移动到元素上时触发某种样式；activate指鼠标按下时的某种样式。

hover使用场景：一些可点击的列表，表格行，卡片等，鼠标放上去之后背景颜色会发生变化，就可以使用hover。

active使用场景：按钮按下，图片按下以及一些可点击元素或者组件等的按下操作样式改变。

下面是一个非常简单的按钮案例(在线MP4转GIF不知道这个图能存在多久，看不见的底下评论提醒我)：

按钮的hover和active

第一个按钮当鼠标放上去是改变边框和字体颜色，第二则是在鼠标按下的时候改变背景和颜色。具体代码如下

.btn{

height: 34px;

padding: 6px 12px;

border-radius: 4px;

font-size: 15px;

color: rgba(0,0,0,.65);

font-weight: 400;

outline: none;

border: 1px solid #cbcbcb;

}

.btn:hover{

border-color: #3385ff;

color: #3385ff;

}

.btn2{

height: 34px;

padding: 6px 12px;

border-radius: 4px;

font-size: 15px;

color: #fff;

background: #3385ff;

border-width: 0;

font-weight: 400;

outline: none;

}

.btn2:active{

border: 1px solid #3385ff;

color: #3385ff;

background: #fff;

}

HTML：

使用非常简单，就是在类选择器后面使用