Global styles and local styles of WXSS

What is WXSS?

    The styles in WXSS are similar to css and are used to set styles for WXML pages. However, WXSS extends the rpx size unit and @import style import.

   rpx: Automatically adapt according to different screens, dividing the width of the device screen into 750 equal parts (the total width of the device is 750rpx)

  @import: used to import styles

Import styles through import

  1. Create a new folder p, create a file ending with wxss under this folder, and define a style

.red{
  color: red;
}

 2. Import styles through import

@import "/p/p.wxss";

 3. Edit wxml reference style

 <view class="red">生于小满，小满为安</view>

Global styles and local styles

                Global styles: Styles defined in app.wxss will apply to all pages

                Local styles: Styles defined in wxss, which apply to the current page

Global styles:

  1. Define a few views in wxml

<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>
<view>哪有自由自在来的逍遥快活</view>

2. Define the view style in app.wxss

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: bisque;
  border-radius: 10rpx;
}

      We have not defined any styles in index.wxss but we can see the styles. This is when the global styles in app.wxss take effect.

 Local style:

1. Define the view style in index.wxss

 view{
   color: teal;
 }

2. Partial styles defined in index.wxss can also take effect

   So here comes the question. Both global styles and local styles can modify the view style in our page. So which of them has higher priority? Let’s try it next.

1. Define a border with a size of 2rpx red entity in the local style

   border: 2rpx solid red;

2. Define a blue solid border with a size of 2rpx in the global style

  border: 2rpx solid blue;

3. The style still has a red border. When the global style and local style conflict, they will be matched based on the nearest principle.

 4. There is a condition required for proximity principle matching. The weight of global styles cannot be greater than the weight of local styles. When we put the mouse on the view, we can see their weights.

 

 

  At present, the global and local weights are (0, 0, 1), so the proximity principle is adopted, then we use the selector for weighting

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

    The current weight of the global style is greater than the weight of the local style, so the effect displayed on our page is changed to a blue border.