微信小程序 CSS 选择器::after和::before的简单使用_软件运维

前两天看文档看到选择器那块儿的时候，前面4个基本都能理解： .class ， #id ， element ， element, element ，但后面两个 ::after 和 ::before （文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记

wxml

wxss

效果

其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容

具体的请参考这篇文章

1、selector:before( sRules ) 它要和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容；

2、selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容；

看例子容易理解些！

代码如下:

<style>

.div{width:350pxborder:1px solid #000line-height:50pxmargin:10px}

.divb{width:500pxborder:1px solid #FC0}

.after,.before,.block{border:1px solid #330}

.after:after{content:'我在后面吧'color:#F00}

.before:before{content:'我在前面吧'color:#F00}

.block:after{content:'我是块元素，我占一行'color:#F00display:block}

.block{display:block}

</style>

<body>

<div class="div">after<span class="after">我是里面的内容</span></div>

<div class="div">before<span class="before">我是里面的内容</span></div>

<div class="divb">block<span class="block">我是里面的内容</span></div>

</body>

可以获取子程序运行输出。

根据相关资料查询显示before/after/match:当expect()匹配到关键字之后，系统会自动给这三个变量赋值，通过这三个变量可以获取子程序运行输出。

Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计，作为一门叫做ABC语言的替代品。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/yw/11340797.html

微信小程序 CSS 选择器::after和::before的简单使用

发表评论

评论列表（0条）