微信小程序——编写.wxml

以index.wxml为例

链接：

视图容器 | 微信开放文档 (qq.com)

两个两块标签时代码：

index.wxml中的代码

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

index.wxss中的代码

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

运行效果：

注意，使用nth-child应将对应组件进行嵌套，以免找不到父节点而显示出错。

 nth开头的伪类，无论-child还是-of-type工作方式如下：

①找到index.wxml中使用了box类的组件

②寻找这些组件的父类

使用nth-child时，若没有使用<view></view>嵌套，则会因为找不到父类，出现点击界面块标签会变色情况。即：开始为块标签1红色，块标签3蓝色；点击后块标签1蓝色，块标签3红色。之后再点击不做改变。

③计算父类中的组件个数

④根据给各组件设置的类修改组件显示

需要注意的是，nth-child或者nth-of-type使用时，（）中的数字要对应该组件在父类中的位置。不对应的话会按照父类box执行，而不是box:nth-child或者box:nth-of-type

 三个块标签时代码

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;
}