WXSS的全局样式和局部样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了WXSS的全局样式和局部样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是WXSS?

WXSS中的样式和css差不多，是用于给WXML页面来设置样式的，但是WXSS中扩展了rpx尺寸单位和@import样式导入

rpx:根据不同的屏幕自动进行适配，把设备屏幕的宽度等分为750份(设备的总宽度750rpx)

@import: 用于进行样式的导入

通过inport来实现样式的导入

1.新建一个文件夹p，在这个文件夹下建一个以wxss结尾的文件，定义一个样式
.red{
  color: red;
}
2.通过import导入样式
@import "/p/p.wxss";
3.编辑wxml引用样式
 <view class="red">生于小满，小满为安</view>

全局样式和局部样式

全局样式：在app.wxss中定义的样式，会作用于所有的页面

局部样式：在wxss中定义的样式，作用于当前页面

全局样式：

1.在wxml中随便定义几个view
<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>
2.在app.wxss中定义view的样式
view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: bisque;
  border-radius: 10rpx;
}
我们没有在index.wxss中定义任何样式但是却可以看到样式，这就是app.wxss中的全局样式生效了

局部样式：

1.在index.wxss中定义view的样式
 view{
   color: teal;
 }
2.在index.wxss中定义的局部样式也可以生效

那么问题来了，全局样式和局部样式都可以对我们页面中的view样式进行修改，那么他们的优先级谁更高呢，接下里我们就试试

1.在局部样式中定义一个大小为2rpx红色实体的边框
   border: 2rpx solid red;
2.在全局样式中定义一个大小为2rpx的蓝色实体边框
  border: 2rpx solid blue;
3.样式还是红色的边框，当全局样式和局部样式发生冲突时，会依据就近原则来进行匹配

4.进行就近原则匹配时需要一个条件，全局样式的权重不能比局部样式的权重大，当我们把鼠标放到view上时可以看到它们的权重

文章来源地址https://www.toymoban.com/news/detail-662598.html

目前全局和局部的权重都为（ 0，0，1），所以就采用了就近原则，那么我们使用选择器来进行加权
view:nth-child(1){
  border: 2rpx solid blue;
}
当前全局样式的权重要比局部样式的权重大，所以我们页面展示的效果就改为了蓝色边框