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上时可以看到它们的权重

 

  目前全局和局部的权重都为（ 0，0，1） ，所以就采用了就近原则，那么我们使用选择器来进行加权

view:nth-child(1){
  border: 2rpx solid blue;
}

    当前全局样式的权重要比局部样式的权重大，所以我们页面展示的效果就改为了蓝色边框