div 子元素 置顶_41 伪元素

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

CSS3增加了伪元素特性。

伪元素表示虚拟动态创建的元素。

伪元素用双冒号表示。

::begore

::before创建一个伪元素，这个伪元素会成为选中的元素的第一个子元素。

注意：::before创建的伪元素，必须给它设置一个content属性，content属性表示这个伪元素的内容。

比如下面的代码：

a元素后面跟了一个::before，

就表示在所有的a标签里面，都给它创建了一个伪元素，

创建的这个伪元素是a标签的第一个子元素。

这个伪元素的属性content，是一个五角星。

这样，就会在页面上每一个a标签的内容最前面，加一个五角星。

::after

::after创建一个伪元素，这个伪元素会成为选中的元素的最后一个子元素。

同样的：::after创建的伪元素，必须给它设置一个content属性，content属性表示这个伪元素的内容。

接下来我在vscode和浏览器中演示一下::before和::after这两个伪元素。我创建一个叫"伪元素.html"的文件，代码如下：

    伪元素

去优酷网

去爱奇艺

去芒果TV

我给a::before的属性content设为一个梅花图案，

表示在所有的a标签的内容前面添加一个梅花图案，

给a::after的属性content设为一个心形图案，

表示在所有的a标签的内容后面添加一个心形图案。

以上代码在浏览器中效果如下：

::selection

::selection创建一个伪元素，这个伪元素应用于文档中被用户高亮的部分(按住鼠标选中的部分)。

我继续在"伪元素.html"这个文件中写新的代码，来演示::selection这个伪元素的效果：

    伪元素

去优酷网

去爱奇艺

去芒果TV

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。

我写了一个类名叫box1的div，在这个div中写了一段文字。给这个div设置了一个黑色边框，宽度300像素，高度200像素。

​

在默认情况下，我们选中这个div中的文字时，会显示蓝色的背景和白色的文字，如下图所示：

但是当我们给这个div添加了伪元素::selection时，我们就可以给这个伪元素设置新的样式，比如我上面的代码中，给它设置的样式是：文字颜色红色，背景颜色金色。

也就是说，此时当我们再选中这个div中的文字时，文字就变成了红色，背景就变成了金色。

现在明白::selection这个伪元素是干什么的了吧！它就是用来设置用户按住鼠标选中的内容的样式的。

::first-letter和::first-line

::first-letter会选中元素(必须是块级元素)中第一行的第一个字母。

::first-line会选中元素(必须是块级元素)中第一行的全部文字。

关于块级元素的概念，后面会学习到。

::first-letter和::first-line这两个伪元素一般在英文网站中用的比较多，因为英文中经常会出现第一个字母大写等现象，就需要这两个伪元素来设置样式。

我继续在"伪元素.html"这个文件中写新的代码，来演示::first-letter和::first-line这两个伪元素的效果：

    伪元素

去优酷网

去爱奇艺

去芒果TV

​

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。

box1::first-line这个伪元素，就是选中box1这个div中的第一行文字，我这里给它添加的属性是：text-decoration：underline;

还记得text-decoration这个属性吗？就是文字装饰的意思，underline，就是下划线的意思。

box1::first-letter这个伪元素，就是选中box1这个div中的第一行的第一个字母。我这里给它的属性是：font-size：60px；即文字尺寸设为60像素。

当我们没有给页面的文字设置字体大小时，浏览器会以默认的大小显示文字，这里我给第一个字母设置为60像素，明显就比默认要大很多。

以上代码在浏览器中显示效果如下：

以上就是常见的伪元素。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！

温馨提示：我在头条关于前端的图文，都是成体系的，如果是没接触过前端，对前端感兴趣、想要学习前端的小伙伴，要按顺序从第一节去看，更重要的是要动手实践。