WeChat applet - writing .wxml

Take index.wxml as an example

Link:

View container | WeChat open documentation (qq.com)

Code for two two-block labels:

Code in index.wxml

<view class="box">块标签1</view>
<view class="box">块标签2</view>

Code in index.wxss

.box{
    width:100px;
    height: 100px;
    background: red;
}
.box:nth-of-type(2){
    background: blue;
}

running result:

Note that when using nth-child, the corresponding components should be nested to avoid errors when the parent node cannot be found.

 Pseudo classes starting with nth, whether -child or -of-type work as follows:

①Find the component using the box class in index.wxml

②Find the parent class of these components

When using nth-child, if you do not use <view></view> nesting, the interface block label will change color when you click it because the parent class cannot be found. That is: block label 1 is red at the beginning, and block label 3 is blue; after clicking, block label 1 is blue, and block label 3 is red. Then click again to make no changes.

③Calculate the number of components in the parent class

④ Modify component display according to the class set for each component

It should be noted that when nth-child or nth-of-type is used, the number in () must correspond to the position of the component in the parent class. If it does not correspond, it will be executed according to the parent class box, not box:nth-child or box:nth-of-type.

 Three block tags when code

index.wxml

<!--index.wxml-->
<view>
<view class="box">块标签1</view>
<view class="box2">块标签2</view>
<view class="box">块标签3</view>
</view>

<text class="text">行标签1</text>
<text class="text">行标签2</text>

<button type="primary">btn</button>
<button type="default">btn</button>
<button type="warn">btn</button>
<button type="warn" plain="true">2222</button>
<button style="background: purple;">hello</button>

<input value="111" style="border: 1px solid black"/>

Index.wxss

.box{
    width:100px;
    height: 100px;
    background: red;
}
.box:nth-child(3){
    background: blue;
}
.box2{
    width:100px;
    height: 100px;
    background: black;
}