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

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

wxml

wxss

js

效果

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

具体的请参考这篇文章

开篇一句话：CSS的伪类，伪元素就当成vue的过滤器使用就好了，我也是想到这个突然就茅塞顿开了。

用法：

:after 选择器表示向选定的元素之后插入内容。

要有content属性

需求举例：div按钮后面有个朝下的ico,点击div后 ico方向朝上

实现办法:

1.可以使用JS实现，div的class名绑定到一个变量上，根据变量的真假值更换class

2.伪类的实现方法

先说思路：

要借助两个class，基础class('base_class')和激活class('rotate').

base_class

相对定位。

base_class:after

放ico朝上的样式，绝对定位。

rotate不要单独加after，不然会取代掉base_class的after,

要两个class都出现才加after

rotate绑定到一个布尔变量上，该变量的真假值由open_select_window更改

html:

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

h1:after

{

content:url(beep.wav)

}

此样式会在每个 h1 元素之后播放一段声音：

<style type="text/css">

h1:after {content:url(/i/w3school_logo_white.gif)}

</style>

<h1>This is a heading</h1>

这是在h1后面插入一张图片，但IE

---