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

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

wxml

wxss

js

效果

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

具体的请参考这篇文章

在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是acss而且对css3进行了扩充而已。

那么在支付宝小程序中的acss和微信小程序中的wxcss没有什么两样。 上边已经说了acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：

加入有一个160px宽度的红色矩形在这两种手机中的位置如下：

rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：

看下图：

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类，如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：

※ a- 或者 am-为前缀的选择器已经被系统占用所以不要使用；

※ 不能使用属性选择器，例如,以下写法不被支持：

我之前说过小程序开发的应用单元为页面。其实我们在axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢其实有一个固定的选择器。例如：

可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到testacss在其中定义page的样式

下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiangcom 我在收到邮件后会回复。

可以。小程序是前后端分离的应用，前端主要负责界面展示和用户交互，后端则负责数据处理和业务逻辑。如果小程序功能设置好了，想要修改界面展示的样式或交互方式，可以只改前端代码。前端代码主要由HTML、CSS和JavaScript等组成，可以通过修改这些代码来实现对小程序界面的修改和优化。

ios端会有一个问题，就是被隐藏后，drop-shadow有时候会失效，就是被隐藏的不会被渲染，所以需要给加上border-right 值，这样虽然被“overflow: hidden”了，但是border还在外边，这样就会被渲染。

安卓和网页端相关没有border-right依然能正常显示。

小程序的页面不支持html标签和css样式。根据查询相关资料信息显示，微信小程序相比WebAPP也有不足，不支持HTML标签和DOM *** 作，对CSS的支持也有限，前端库和框架也无法使用。

微信小程序旋转大师的代码是什么 - 百度知道

2个回答回答时间：2022年12月1日

最佳回答：微信小程序实现可实时改变转速的css3旋转动画实例代码,前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关

百度知道

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

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

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

以上就是关于微信小程序 CSS 选择器::after和::before的简单使用全部的内容，包括:微信小程序 CSS 选择器::after和::before的简单使用、二、支付宝小程序前端样式的设计.acss样式详解、小程序功能设置好了可以只改前端嘛等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！