微信小程序选择器

你去把阿里干掉！

已于 2023-11-29 08:54:49 修改

阅读量4.1k

点赞数 18

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-11-29 08:54:33 首次发布

本文链接：https://blog.csdn.net/m0_72168336/article/details/134671788

版权

微信小程序专栏收录该内容

17 篇文章

订阅专栏

前言

微信小程序中支持使用以下选择器来选取页面中的元素：

ID选择器：使用#符号后跟元素的ID来选取，例如#my-id。
Class选择器：使用.符号后跟元素的class名称来选取，例如.my-class。
元素选择器：直接使用元素名称来选取，例如view、text、image等。
子元素选择器：使用空格隔开两个元素名称来选取该元素的后代元素，例如.view .text。
兄弟元素选择器：使用~符号隔开两个元素名称来选取同级的兄弟元素，例如.view~.text。
属性选择器：使用方括号[]，在内部使用元素属性名和属性值来选取，例如[width='100rpx']。

使用这些选择器可以方便地选取页面中需要的元素，并进行相关的操作和样式修改。

在微信开发者工具中我们可以在app.json页面的pages下直接新增页面，运行之后开发者工具将会自动生成相关内容，比如在pages下添加了select页面运行之后就会生成对应的文件夹

注意：pages里面的第一个页面微信小程序开发者工具会默认为第一个页面，每次编译之后也是显示第一个页面，在上传成功发布之后用户打开的第一个页面也就是pages里面的第一个页面。

这里可以添加编译模式，针对单个页面进行编辑，这里我们添加我们刚才新建的页面

添加刚才新建的select页面，这样每次编译（运行）之后就会来到select页面，添加编译方式常用于对某个页面进行操作，一个小程序有多个页面，可以使用这个方法对页面进行操作，就避免了编译之后每次都会回到第一个页面。

一、元素选择器

微信小程序元素选择器是一种在小程序中根据元素的特征进行定位的方式。

微信小程序的view标签是用于显示文本和其他组件的常用容器标签，类似于HTML中的<div>标签。它可以嵌套其他视图组件，并且可以应用样式。

下面这个WXML文件中，有一个view标签，里面包含了text（文本），button（按钮），image（图片）三个元素，我们需要在WXSS文件中编写代码分别对这三个元素进行渲染，这种对元素进行定位并渲染就是使用元素选择器。微信小程序开发中还有许多的元素，需要后面慢慢学习。

<view>
<text>这是一段文字</text>
<button>这是一个按钮</button>
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5d950188-3bd4-418f-911e-4b4b9768e9e7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703756503&t=1400a90e271ae964edfc036e95000b86" mode=""/>
</view>

page{
  background-color: rgb(214, 214, 214);
}
text{
  margin-top: 100rpx;
  color: brown;
}
button{
  margin: 20rpx;
}
image{
  height: 700rpx;
  width: 100%;
}

运行结果

二、Class选择器

在微信小程序中，可以使用class选择器来选择指定的节点，并对其进行操作。在wxml文件中，可以通过以下方式定义class选择器：

<view class="class-name">Hello World</view>

然后在对应的wxss文件中，可以使用.class-name来定义样式规则，例如：

.class-name {
  font-size: 24px;
  color: #333;
}

这样，所有使用了class为class-name的节点，都会应用这些样式规则。另外，如果想设置子元素的样式，也可以使用后代选择器：

.class-name view {
  font-size: 16px;
  color: #666;
}

这样，所有class为class-name的view节点的子节点，都会应用这些样式规则。

三、ID选择器

ID选择器和class选择器差不多，就是工具元素里面的id来单位进行渲染，只不过class选择器渲染时前面加的是“.”+class名，而id选择器是“#”+所在元素的id，此外任何元素都可以添加class类和id属性。

<view class="vv">
<text id="test1">这是id等于test1的文本</text>
<view id="test2">这是id等于test2的文本</view>
</view>