Learn the difference between WeChat applet WXSS and CSS

This post is a note for 9 hours of learning to complete the development of WeChat applets.
Documentation : WXSS Mini Programs

WXSS is similar to CSS, but some additions and modifications have been made on the basis of CSS.

Same point

width: Set the element width.
height: Set the height of the element.
position: Set the element positioning method.
color: Sets the color of the text within the element.
border: Sets the border style of the element.
…

Additions and Modifications to WXSS

1. Size unit rpx

rpxis a responsive pixel. Because the WeChat applet cannot recognize pixel units such as rem. But rpxit remis very similar to and can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px, and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.

Note: rem(font size of the root element) refers to the unit relative to the font size of the root element. Simply put it is a relative unit. When you see rem, you will definitely think of emthe unit, em(font size of the element) refers to the unit relative to the font size of the parent element. They are actually very similar, except that one calculation rule depends on the root element and the other depends on the calculation of the parent element.

Device pixel: The smallest physical unit of screen display that the device can control. These physical units are points on the display screen, and these points are fixed.
CSS pixels (CSS pixels): Logical pixels in web programming.
PPI/DPI (pixel per inch): The number of pixels per inch. A higher value means that the display can display images with higher density.
DPR (devicepixelRatio): The ratio of device pixels to CSS pixels in a certain direction of the mobile phone. When switching between different devices above the emulator in the WeChat developer tools, you can see the corresponding DPR value.
Write picture description here

2. External style import

Use @importidentifiers to import out-of-line styles. @importFollowed by the relative path of the external style sheet that needs to be imported, and ;ends with the expression statement.

External styles are executed sequentially, from top to bottom, left to right.

<!-- index.wxml -->
<view class="container">
    Hello,world!
</view>

/** index.wxss **/
@import './assets.wxss';
.container{
    color: red;
}

/**assets.wxss**/
.container{
    border: 1px solid #000;
}

Write picture description here
If the label index.wxssin the property is set to another color, it will override the black border set in it.containerborderassets.wxss

3. Inline styles

Framework components support the use of style and class attributes to control the style of the component.

style: Static styles are uniformly written into the class. style receives dynamic styles, which will be parsed at runtime, please try to avoid writing static styles into style, so as not to affect the rendering speed.

<!--index.wxml-->
<view style="width:500rpx;height:30px;background-color:{
    
    {
    
    colorValue}};">
    Hello,world!
</view>

//index.js
Page({
    data:{
        colorValue:'red'
    }
})

Above, by binding the value of the background color to a variable, data sets a colorValue value of red in index.js.
Write picture description here

class: It is used to specify style rules, and its attribute value is a collection of class selector names (style class names) in the style rules. The style class names do not need to be accompanied by ., and the style class names are separated by spaces.

So generally write the static style attributes classin, and write the dynamic style attributes style.

4. Selector

Write picture description here
Other nth-type-of(n)selectors that have been actually tested (matching each element of the Nth child element belonging to a specific type of parent element) can also be used in the WeChat applet, so the actual performance shall prevail, and the official documentation is missing You can give feedback in the developer community.
The priority of the selector
!important (not counted as a selector, just to increase the weight) — weight infinite
style(label inline style) — weight 1000
#element(id selector) — weight 100
.element(class selector) — weight 10
element— weight 1
when in a When a rule is declared in a style !important, this rule overrides any other declarations. Since !importanthas the highest weight, use it with care as it breaks the rules inherent in the stylesheet.
When making a small program plug-in, you can encapsulate a certain function and make it into a plug-in to share with others. When we use other people's plug-ins, if we want to modify the style of the corresponding elements of the plug-in, we can not only modify it in the code of the plug-in, but also use this declaration !importantrule in the outer layer of the plug-in to directly modify it.

/** index.wxss **/
.title{
    color: red !important;
}

titleThe text color in the mandatory modification is red.