【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。

效果图

伪类与伪元素

伪类

在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态^[1]。

通俗来说就是： 我们要在某个元素处于某种状态时为其添加某个样式，但是仅仅通过dom树又无法表示这种状态，此时可以通过伪类对其添加样式。比如当鼠标滑动过某个文字时将其变为红色，可使用伪类来实现：

 <body><h1 class="title">伪类</h1><style type="text/css">.title:hover{color: red;}</style></body>

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式^[2]

通俗来说：我们可以使用伪元素创建在dom树中并不存在（在HTML文档中未定义这个元素，）的元素。话不多说上示例代码：

 <body><!-- 在HTML文档中只定义了一个元素 --><h1 class="title">HTML中定义的元素</h1><style type="text/css">.title:hover{color: red;}/* 通过伪类增加一个元素 */.title::before{content: "伪类定义的元素";font-size: 12px;color: blue;}</style></body>

案例说明

弄清楚伪类与伪元素的区别之后，那我们就用伪元素来添加小图标。

再看一眼效果图，我们要在 “5月14日” 前加上一个日历的小图标。

<view class="date-text"><text>5月14日</text></view>

<text>5月14日</text>被包裹在 class=“date-text” 这一 <view></view> 元素内部，所以需要在view内部创建一个图片伪元素，具体操作看注释咯。

.date-text {font-size: 28rpx;display: flex;margin: 0 20rpx;// scss 语法，相当于 .date-text::before&:before {content: '';display: block;// 定义元素位置margin-top: 12rpx;margin-right: 20rpx;// 定义元素宽高width: 36rpx;height: 36rpx;// background-image无法引用本地资源，故需要用网络地址background-image: url($url+'calendar.png');background-size: 100% 100%;}text {margin-top: 12rpx;}
}

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
https://www.cnblogs.com/xmbg/p/11608268.html

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片相关推荐

CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
复合选择器-链接伪类选择器（HTML、CSS）
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
html伪类选择器怎么使用,CSS3 :default伪类选择器使用简介
一.CSS3 :default伪类选择器简介 CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素. 举个例子,一个下拉框,可能有多个选项,我们默认会让某个处于 sel ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
css 伪类 disabled,css3 :enabled与:disabled伪类选择器(示例代码)
css :enabled和:disabled伪类选择器在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下, ...
使用伪类（before，after）给元素添加分割线（|）
html: <div class="pseudo-class">伪类元素</div> css: 在元素前面加 |使用::before .pseudo-cla ...
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
html5 子元素选择器,CSS子元素选择器 - HTML电子邮件
Shaggy.. 6 这是可能的,是的,但你需要使用多个选择器,检查第一个单元格也是第四个最后一个单元格,第二个单元格也是第三个单元格,依此类推: .myclass2{ background:#000 ...

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

效果图

伪类与伪元素

伪类

伪元素

案例说明

参考文献

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片相关推荐

最新文章

热门文章

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

效果图

伪类 与 伪元素

伪类

伪元素

案例说明

参考文献

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片相关推荐

最新文章

热门文章

伪类与伪元素