css伪类及伪元素用法

注：该表引自W3School教程

伪元素的分类及做用：

接下来让博主经过一些生动的实例（以前的做业或小做品）来讲明几种经常使用伪类的用法和效果，其余的读者能够本身尝试：

 

:active 

大体效果为用鼠标点击时，元素增长特效，鼠标松开时，特效消失。多用在按钮的点击上。

 写法：

这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后须要修改的样式。

未点击时： 点击以后：

:active、:hover、:focus这几种经常使用伪类写法一致，下面就再也不赘述。为了直观贴上几张GIF，方便你们理解。

正如以前所说的:active常常用在按钮的点击上：

大体写法就是：在点击以后让按钮的坐标下移1-2像素并缩小外部阴影，由此给人一种立体的感受。固然，你们能够发挥想象，充分利用伪类来作出最炫的交互。

 

:hover

当咱们须要对某一对象添加当鼠标悬浮之上时改变样式，就能够用到:hover伪类。

这里仍是用按钮来作演示：

 

当光标放在按钮上，按钮的背景色和文字颜色作一反色并加上渐变，这种效果简单但吸引人。固然你们也能够随着不断学习挑战更加炫酷的效果。 

这里多说一句：

:hover的好搭档cursor属性，当属性值为pointer时，如上上图，光标覆盖目标时会变成手型。cursor还有url属性，其为设置图片地址。

在以后用javascript或者HTML5作游戏时，系统的光标就显得格格不入了。这里能够经过cursor将光标变成你想要的手型图片，好比这样的：

此时cursor属性能够放在全局body{}里或者任何你须要的地方。

 

:focus

当咱们须要让点击以后的元素一直拥有某些样式，这时用:active就不行了，由于松开鼠标样式会消失。:focus能够用在<input>标签上。

这是以前作过一简单的表单：

:focus与以前伪类所产生的来不同的效果：

 

:first-child

对元素的第一个子元素添加样式，经常使用在ol,ul下面的li，或者tr下面的td或th上等等。

效果：

实际中经常使用到的地方：

 在实际编写页面上，常常会有像上图同样的布局。多个图片并排放在一行，对于多个样式类似并排的元素咱们一般将其放在列表标签里的<li></li>中，这时咱们能够先在li的样式中用margin-right来设置li之间的间距既每张图间的间距，以后在li的:first-child中经过margin-left来设置第一张与左边界的距离，从而调整好整排图片或元素在网页中的布局。

 

伪元素:before和:after

 两者的做用为在元素以前或以后插入某些内容，注意：这里的“先后”并非位置上的先后，而是文档流里的先后。

一般状况下用来作这个：

这个：

以及这个：

都是一些指引型的小三角或者小箭头之类的。

代码：

经过给一div附上某一小图标，而后设置与该div的相关位置。

content中的内容参见unicode几何图形列表，因为过大就不在这里贴了，只截取一小部分展现下，有兴趣的朋友百度吧。

固然！！before及after的用法毫不这么简单!

你能够将content属性设置为“”，而后尽情发挥想象：

 

这里不只用了:hover，按钮外部的光圈就是经过:before作出来的。

 

感谢您的浏览，但愿能对您有所帮助。

---

本文转载自他人，为尊重原创附上原文连接：https://www.cnblogs.com/ghost-xyx/p/3763669.html