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

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

wxml

wxss

js

效果

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

具体的请参考这篇文章

目前支持的选择器有：

class 比如：intro（选择所有拥有 class="intro" 的组件）

#id 比如：#firstname（选择拥有 id="firstname" 的组件）

element 比如：view（选择所有 view 组件）

element, element 比如：view, checkbox（选择所有文档的 view 组件和所有的 checkbox 组件）

::after 比如：view::after（在 view 组件后边插入内容）

::before 比如：view::before（在 view 组件前边插入内容）

一个小程序页面由四个文件组成，分别是：js

页面逻辑 、wxml

页面结构 、wxss

页面样式表 、json

页面配置 。把样式宝贝到当前页面同名的wxss文件里面就可以了

问题：在微信小程序中使用height:calc(xx - xx)设置元素高度无效

排查原因:calc属性设置height或width时，要求父容器有明确的对应属性设置，当父容器没有设置时，calc计算无法完成。因为我想设置高度的元素没有父容器，所以calc失效。

解决办法：1给该元素添加设置明确高度的父容器。2直接通过page{height:100%;}解决。

以上就是关于微信小程序 CSS 选择器::after和::before的简单使用全部的内容，包括:微信小程序 CSS 选择器::after和::before的简单使用、微信小程序所支持的CSS选择器有哪些、微信小程序 页面怎么引入css文件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！