Uniapp开发鸿蒙购物项目教程之样式选择器

简介: 本篇教程介绍了uniapp开发鸿蒙应用中的样式选择器,包括类选择器、ID选择器、属性选择器、内联选择器和后代选择器,并讲解了它们的基本用法与优先级规则。通过简单示例帮助开发者理解如何为组件设置样式,同时提醒合理使用!important以避免样式管理混乱。适合初学者掌握鸿蒙跨平台开发中的基础样式控制方法。

大家下午好,今天依然为大家带来鸿蒙跨平台开发教程的分享,我们本系列的教程最终要做一个购物应用,通过这个项目为大家分享uniapp开发鸿蒙应用从配置开发环境到应用打包上架的完成过程。

昨天的文章实现了应用首页的轮播图,其中涉及到为轮播图设置样式,放一小段代码带大家回顾一下:

.swiper-item{
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
}

对于有css基础的同学来说这段代码很简单,但是对于初学者同学来说可能会不是很明白,今天幽蓝君就为大家分享一下uniapp开发鸿蒙时的样式选择器。

所谓样式选择器,就是为组件设置样式,比如背景色、大小、间距等等,ArkTs中也有这些样式,甚至名字都差不多,只是在语法上差别较大,而且uniapp中的选择器种类甚多,下面为大家一一讲解。我们以设置文字的颜色为例:

类选择器

这第一个选择器就是上面的代码中的样式,是由.+名字组成,它修改的是class为对应名字的组件,例如:

<text class="text1">类选择器</text>

.text1{
  color: red;
}

这样对应组件中的文字就会被设置为红色。

ID选择器

和类选择器略有不同,ID选择器由#+名字组成,修改的是对应id的组件:

<text id="text2">ID选择器</text>

#text2{
  color: green;
}

属性选择器

属性选择器比较简单粗暴,如果你在定义样式时直接写组件名字,那么该组件的样式会全部被修改:

<text>属性选择器</text>

text{
 color: gray;
}

内联选择器

不知大家有没有注意到,关于样式还有一种直接在组件中写style的方式,这种方式叫做内联选择器:

<text style="color: orange;">内联选择器</text>

后代选择器

这种方式是在属性选择器的基础上,如果你在使用属性选择器时写了两个名字,比如 :

view text{
}

这样的样式将在view容器内的text组件中生效。

关于选择器的种类还有很多,这里就不再一一列举,常见的选择器基本就是上面这么多。

下面说一说优先级的问题。大家可能经常见过内联选择器和其他选择器同时出现,比如:

<text class="text1" style="color: orange;">选择器优先级</text>

.text1{
  color: red;
}

两个选择器都设置了文字的颜色,那么谁的优先级更高呢,答案是内联选择器优先级更高。不光是和类选择器相比,上面我们介绍的所有的选择器中都是内联选择器的优先级更高。

但是它不是优先级最高的。如果我的类选择器、ID选择器中的样式不想被内联选择器覆盖呢?可以在样式后添加!important,像这样:

text{
  color: gray !important;
}

在所有的选择器中,!important的优先级是最高的,也提醒大家一定要慎重使用它,它虽然好用但是缺点更多,能不用则不用。

以上就是对选择器的一些介绍,感谢大家阅读。##鸿蒙三方框架##Uniapp##购物#

相关文章
|
6月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
843 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
315 0
|
6月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1089 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1008 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
967 0
|
7月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
292 1
|
7月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
674 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
7月前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
339 1
|
7月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
520 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
7月前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
187 1

热门文章

最新文章

下一篇
开通oss服务