微信小程序——wxss高级篇讲解（before，after )(.class image)(@import)(＜view class=‘view1 view2‘ / ＞)、wxss中使用变量

已于 2022-09-29 23:11:35 修改
阅读量9.5k 收藏 19
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序 javascript 前端
于 2020-11-03 11:21:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy313622821/article/details/109462716
本文介绍了WXSS中的八种实用技巧，包括:before/:after伪元素、选择器组合、样式引入、复合类名、Checkbox样式定制、动画定义、属性选择器及变量使用等，帮助开发者更好地进行样式设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大家有没有遇到这样的一种现象，在看复杂的wxss，有时候总是理不清，比如：

第一种：before ，after

恰当的使用before和after能很好的减少层级的嵌套，提升渲染的性能和速度

效果一（最基本的效果）：

在这里插入图片描述
代码如下：

	.container_1 {
	  width: auto;
	  margin: 30rpx;
	  /* text-align: center; */
	}
	
	.view_1 {	  
	  font-size: 70upx;
	  color: red;
	}
	/* 在view_1控件之前 */
	.view_1::before {
	  content: "苹果：¥";	 
	  font-size: 40rpx;	  
	  color: black;
	  margin-right: 10px;
	}
	/* 在view_1控件之后 */
	.view_1::after {
	  content: ".00 元/斤";
	  font-size: 30rpx;	 
	  color: black;
	}

<view class="container_1">
    <view class="view_1">500</view>
</view>
效果二：before的content使用动态的值

代码跟上面的一样，只是有三处地方需要改动：（主要是使用 attr()）
1、content: attr(href);
2、500
3、data里面添加值：valueTest: ‘hello’

效果三：

before前面相当于是一个view了，
下面是效果图：
在这里插入图片描述
代码为：（view_1还是用的上面的view_1）

.view_1::before {
  content: "123";
  display:flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
  border-radius: 5px;
  position: absolute;
  left: -35px;
  font-size: 40rpx;
  background: rgb(255, 202, 202);
}

第二种： .class+空格+控件（image）

示例：

.view_1{
	width: 100%;
    height: 100%;
}
.view_1 image {
    width: 90rpx;
    height: 90rpx;
}

<view class=''>
	<image src='../images/1.png'/>
</view>

解释2：

.view_1 image 表示设置view里面的image控件长宽为90rpx

第三种： @import

/** other.wxss **/

.appText{
  margin:10px;
}

/** app.wxss **/

@import "other.wxss";
.content_text:{
  margin:15px;
}

解释3：

app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。

第四种： wxml中<view class=‘view1 view2’ / >

<view class="container_1">
    <view class="view_1 view_2">500</view>
</view>

.container_1 {
  width: auto;
  margin: 30rpx;
  text-align: center;
}

.view_1 {
  position: relative;
  display: inline-block;
  font-size: 70rpx;
  color: red;
}
.view_2 {
  background-color: #6699FF;
}

解释4：

只要一个 class=“view_1” 的效果图为：
在这里插入图片描述
两个都要 class=“view_1 view_2” 的效果图为：
在这里插入图片描述

第五种：checkbox .wx-checkbox-input.wx-checkbox-input-checked

/*checkbox 整体大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}

/*checkbox 选项方框 大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}

/*checkbox选中后 选项方框 样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #5a76f5;
}

/*checkbox选中后  选项框（勾的颜色、大小、位置） 图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

解释5：

没有以上代码的效果：
在这里插入图片描述

添加了以上代码的效果
在这里插入图片描述

第六种：动画的 @keyframes

@keyframes fnToLeft{
    from{transform:translate3d(0rpx, 0px, 0px)}
    to{transform:translate3d(-240rpx, 0px, 0px)}
}

第七种：[class*=animation-]

表示所有包含“animation-”都会巨有如下的属性

[class*=animation-] {
  /* 设置动画在两秒内完成: */
  animation-duration: 0.5s;
  /* 动画以低速结束。 */
  animation-timing-function: ease-out;
  animation-fill-mode: both;

}
 /* 这里的animation-1就具备上面的那些属性  */
animation-1{
 display:flex
}

第八种：wxss中使用变量[data-tab=“1”]

在这里插入图片描述
wxml代码：

<view class="view2" data-tab="0">内容二</view>
<view class="view2" data-tab="1">内容二</view>
<view class="view2">内容二</view>

wxss代码：

.view2[data-tab="1"] {
  background-color: rgb(232, 241, 148);
  height: 200rpx;
  margin: 20rpx;
}


.view2[data-tab="0"] {
  background-color: rgb(185, 250, 166);
  height: 200rpx;
  margin: 20rpx;
}