借Vue-iview样式修改，熟悉:before和:after伪类的用法

需求：将下图中的tag右侧的小叉背景颜色改成边框颜色，只改变css

⇓

由于没有vue环境（还没有系统学过vue哈哈哈哈哈……），朋友给我发了iview地址：

https://www.iviewui.com/components/tag

直接在这里编辑样式吧~

先上结果（画红框是修改部分）：

⇒

OK，咱们来看下这块儿的html结构

点一下代码中的"::after"部分，会发现，原来图中左侧文字(span)和右侧图标(i)中间的竖杠就是这部分，666……见下图中中间竖线（微微发蓝就是表示::after代码对应的部分，就是这一小条）

那么这里是如何实现的呢？我们再看下这块儿的css是咋写的：

解释一下：

:after表示当前对象是一个伪类，::after元素，表示伪元素。如何理解呢？对指定css选择器写了:after后，并写了content属性后，会在html源码中添加::after元素，表示伪元素。你就把它当成一个可以显示的html对象、DOM对象就可以了，只不过这个对象，在你自己的源码中是不存在的，是浏览器生成出来的，大概因为这个原因所以叫“伪类”吧……

宽度1px，表示当前内容宽度为1像素

采用绝对布局，上下间距均为0，这样当前元素就会纵向充满父容器，:after的父容器就是他伪类依托的外层对象，也就是".ivu-tag"这一层。（PS：top和bottom都置为同一个数也可以用来做纵向居中~不过个人不常用~~）

距父容器右侧22像素，嗯，所以这条红色的线就出现在了小叉和文字之间，因为图标宽度是固定的嘛，文字长度不确定，所以肯定是距右侧22像素，机智~

那么，如何在:after上修改，让其作为背景颜色呢？

让”线“的”距右侧距离“为0，并”宽度“为之前的”距右侧距离“就OK了，如下

emmm~看下效果~

OH SHIT ...，我的小叉叉呢？！！来咱们分析下（脑补模式开启）：

i标签在div中，当div里面的一个内容（:after）范围大于i，此时:after和i是互相重叠的，而且，后出现的元素的层级在上一个元素的层级之上，所以造成了小叉不见了。

很自然的就会想到：如何让i在:after之上呢？首先这里需要说下:after的习性，:after总是会出现在宿主对象内部的最后，就是说无论你在宿主中加什么东西，:after永远出现在这些东西之后，并在宿主内部。

解说完毕，回到问题，想让:after出现在i之前是不可能了，那么只能提高i的层级了……

z-index这个属性就是用来指定当前对象层级（官方解释：”元素的堆叠顺序“）的属性，如果不指定，默认是0（好像是……），该属性只能在已定位元素上使用，即使用position的元素，具体解释请参看w3cschool解释。万幸，原始样式中已经指定了position: relative，咱们直接在i标签上加上z-index: 1，效果如下：

逗我呢？！！……冷静思考下，原来是颜色忘了置成白色了……汗，最终效果如下：

（i原始样式有透明度0.66的设置，最后为了美观改成了1，随喜好添加）

大白话总结下：

:after或:before伪类，就是字面上，给内容的最后或最前增加一部分内容，需要配合content属性使用（详情见w3cschool），多用于给一些元素增加重复的，相同的内容，如计量单位、图标、补充装饰物……

z-index能设置堆叠顺序，数越大越靠上层

::after是伪元素，:after是伪类

彩蛋&花絮>>>>>>

其实一开始试的时候，给i增加了float: right和height: 0样式……想着得先浮动起来……其实z-index是挑position属性，不挑是否浮动~~(单加float和height没有效果，不用试了……)

借Vue-iview样式修改，熟悉:before和:after伪类的用法相关推荐

iview样式修改Pooptip气泡框
iview的修改在全局样式中修改App.vue 给PoopTip 加个class(.node_poptip)区分全局,防止全部覆盖气泡框要修改两处 .node_poptip {.ivu-popti ...
CSS样式内联选择器选择器优先级伪类顺序
日期:2020-10-02 作者:19届WY 标签:CSS选择器相关内容一.html简介&CSS简介 == html简介 : 结构:决定网页的结构及内容,即"显示哪些内容" ...
Vue body样式修改
此篇博客记录自己再写项目是遇到的App.vue显示问题. 问题:查看页面时,发现有8px的margin,看着很不爽,想要去掉这个margin. 修改前:直接上图解决方式,通过beforeCreate ...
(vue)提示Tooltip/el-popover在下拉选框option中用法及样式修改
(vue)提示Tooltip/el-popover在下拉选框option中用法及样式修改 iview效果 Eleement-ui效果代码 <Optionv-for="(item, i ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
Vue 引入Ueditor修改样式仿照Word文档
前言项目中有涉及到对文本生成和文本内容编辑的需求,选择了百度的Ueditor.项目使用Vue框架.便于利用双向数据绑定特性,完成文本的生成. 效果图 Vue 引入Ueditor 下载Ueditor ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
vue、css修改滚动条样式
vue.css修改滚动条样式样式为 /* 滚动条 */ body *::-webkit-scrollbar {width: 10px;height: 10px; } body *::-webkit- ...
vue admin template 侧边栏及顶部栏演示字体样式修改
一.侧边栏字体样式修改文件位置修改代码 <script> export default {name: 'MenuItem',functional: true,props: {icon: ...

借Vue-iview样式修改，熟悉:before和:after伪类的用法

借Vue-iview样式修改，熟悉:before和:after伪类的用法相关推荐

最新文章

热门文章