微信小程序（第十三章）- wxss选择器介绍

已于 2022-01-24 14:58:39 修改
阅读量2.2k 收藏 5
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序
于 2022-01-24 14:28:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42178241/article/details/122666936
版权

微信小程序（第十三章）- wxss选择器介绍

选择器定义

选择器:用来选择页面元素给其添加样式。

选择分类

  1. #xx 根据id选择元素
  2. .yy 根据class（类）选择元素
  3. zz 根据组件名选择元素
  4. 父元素 > 子元素 选择父元素的所有子元素
  5. 父元素 子元素 选择父元素的所有后代
  6. 父元素 > 子元素:nth-child(num) 选择父元素的第num个子元素
_Yxz_
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序开发基础：WXML、WXSS、JavaScript基础语法（中）
luoyingdegesheng的博客
06-15 2244
WXSS语言作为小程序开发的基础技术之一，掌握它的基本语法和规则，能够帮助开发人员轻松地控制小程序的样式和布局，实现更加美观、高效的小程序应用。通过本文的简介，我们可以了解到WXSS语言的选择器、属性、单位、层叠、优先级等基本特性，同时也可以预览到一些实际的样式表示例。例如下面的示例中，由于两个选择器的优先级相同，所以标签根据书写顺序的进行层叠，后出现的选择器属性会覆盖前面的属性。例如下面的示例中，page.wxss控制页面整体的样式，而button样式仅用于控制按钮的样式。四、WXSS中的单位。
微信小程序静态页面案例（附源码）
03-29
微信小程序出来有段时间了，最近抽空写了个静态案例练练手。由于没有公测名额，无法测试，没有接口，所以先这样吧。 首先上图，整个app的演示是这样的： 图一     一、微信小程序和html5标签的区别： (此图片来源于网络，如有侵权，请联系删除! ) 二、wxss 选择器 HTML5 微信小程序 div（标签选择器） view、text、icon、input、image、navigator（标签选择器） class(类选择器) class id(id选择器)（效率最高） id(效率最高) element,element(层级选择器) element,element(层级选择器) ：after（伪
微信小程序开发之——比较数字大小-页面样式(2
最新发布
2401_84121702的博客
04-20 419
WXSS支持使用选择器来为某个元素设置样式，其使用方法和CSS选择器基本相同，常用的选择器如下表：| 选择器 | 示例 | 说明 || .class | .container | 选择所有class=”container”的组件 || #id | #id | 选择id=”#id”的组件 || element | view | 选择所有view组件 || element,element | view,text | 选择所有view组件和所有text组件 |
微信小程序开发之——比较数字大小-页面样式(2.3)
我的博客
10-26 2534
一 概述 WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式。WXSS具有CSS大部分特性，并在CSS基础上做了一些扩充和修改。 二 选择器 2.1 概述 WXSS支持使用选择器来为某个元素设置样式，其使用方法和CSS选择器基本相同，常用的选择器如下表： 选择器 示例 说明 .class .container 选择所有class=”container”的组件 #id #id 选择id=”#id”的组件 e
【微信小程序】WXSS样式
MrsBaek的博客
07-12 1028
这些基本的选择器在WXSS中提供了基本的样式选择能力，可以根据元素的类型、类名、ID和状态来选择元素并应用样式。需要注意的是，相比CSS，WXSS的选择器支持范围较小，不支持复杂的选择器如后代选择器、子选择器、属性选择器等。而WXSS仅支持基本的选择器，如元素选择器和类选择器，不支持ID选择器和属性选择器。只在微信小程序中有效，在Web开发中并不支持该单位，因此在使用其他前端框架或开发Web页面时，需要使用其他适合的尺寸单位，如像素（px）、百分比（%）等。，它会被等比例换算成屏幕上的物理像素。
微信小程序开发【六】-- wxss详解
老六说编程的博客
04-08 1309
WXSS是一套样式语言，用于描述WXML的组件样式。
微信小程序wxss文件stylelint配置stylelint-config-wxss-master.zip
09-25
在微信小程序的开发过程中，为了保证代码质量和遵循良好的编码规范，我们可以利用stylelint这样的CSS linting工具来对wxss（微信小程序特有的样式表语言）文件进行静态分析和检查。`stylelint-config-wxss-master....
微信小程序 -- 年月日时分秒 picker 选择器
06-28
在微信小程序开发中，UI组件的选择器`picker`是一个常用的功能，它允许用户从一系列选项中进行选择。本文将深入探讨如何实现一个专门用于选择年、月、日、时、分、秒的`picker`组件，以提升用户体验并增强应用程序的...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序 weui-wxss-master.zip
11-06
3. **WXSS（微信小程序样式表）**：类似于CSS，但有其特性和限制，如全局样式和局部样式、相对单位rpx的使用、选择器的特定性等。WeUI-WXSS库就是提供了预定义的WXSS样式，用于快速搭建界面。 4. **WeUI组件**：...
微信小程序-电影推荐-程序源码.zip
05-31
微信小程序的开发主要基于JavaScript、WXML（微信小程序的结构语言）和WXSS（微信小程序的样式语言）。JavaScript负责处理逻辑和数据，WXML用于定义页面结构，而WXSS则用来设计界面样式。 1. **页面结构与数据绑定*...
微信小程序学习3(wxss)
m0_57547938的博客
08-14 1715
id与class选择器 css中文本常见样式 边框属性 px与rpx image组件 swiper组件
微信小程序-----适配小结、移动端1px与选择器权重
weixin_44775723的博客
08-17 300
一、WXSS选择器权重与优先级 权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式 <!-- WXSS选择器权重与优先级 --> <view class="qz" id="qzA" >权重问题</view> /* 权重优先级 */ /* 权重1 */ view{ color: red; } /* 权重10 */ .qz...
微信小程序的css嵌套使用
小菜鸟的博客
12-28 2461
微信小程序的css使用 首先微信小程序独有的css单位rpx,这个是他独有的自适应单位 假如现在有100px的宽度的盒子，那么使用自适用rpx单位则是750*盒子宽度/设计稿宽度如果设计稿宽度为375px，那么实际使用rpx的盒子则是200rpx 导入wxss外部样式 1.在外部创建styles公共样式文件夹 2.创建一个公共微信common.wxss文件 3.在需要的文件夹中引用相对路径"@ipmort "../../styles/common.wxss" 另外在微信样式中选择器*是无效的，想要初始样
微信小程序之选择器
Java 璐到底
03-20 5042
选择器示例demo： 1.普通选择器2.多列选择器3.时间选择器4.日期选择器5.省市区选择器 源码： wxml <view class="container"> <!--选择器--> <view class="section"> <view class="section__title">普通选择器：（普通数组）</view> <picker bindchange="bind...
CSS3 选择器、Sass选择器、在小程序中使用的选择器（wxss为例）
jclee95的个人博客
07-23 759
本文介绍CSS选择器、Sass选择器、在小程序中使用的选择器。
android工程师学习微信小程序笔记② WXSS选择器和优先级
单片机菜鸟哥的博客
04-24 1102
前言 作为一个传统出身的Android开发搬砖工程师，由于工作需要以及历史推进，最近一年的工作都在写小程序。作为习惯于总结经验的我来说，在研究官方文档之余还是觉得应该写写笔记，作为学习记录。所以接下来一段时间都会写写一些关键记录。 选择器 目前支持 目前，习惯性工作中，使用类选择器的比例基本上占了 90%以上。 WXSS优先级 权重越高越优先（其实可以理解为同样去操作一个view，优先级低先...
WXSS选择器
dianlu5775的博客
09-19 1187
转载于:https://www.cnblogs.com/max-hou/p/11547921.html
什么是wxss
热门推荐
小鱼儿~同学
02-11 1万+
小程序中的样式 wxss( WeiXin Style Sheets ) 是一套样式语言，用来决定 WXML 的组件应该怎么显示 wxss 具有 css 大部分特性 wxss 对 css 进行了扩充以及修改，以适应微信小程序的开发 wxss 与 css 相比，wxss扩展的特性有： 尺寸单位 样式导入 wxss目前支持的选择器 id选择器 标签选择器 类选择器 伪类选择...
微信小程序开发作业模板06-MOOC1
08-08
微信小程序开发作业模板06-MOOC1

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_Yxz_

我只是一名ssfoier

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值