以index.wxml为例
链接:
两个两块标签时代码:
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;
}