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

举报
yd_271872561 发表于 2025/06/25 14:53:50 2025/06/25
【摘要】 大家下午好,今天依然为大家带来鸿蒙跨平台开发教程的分享,我们本系列的教程最终要做一个购物应用,通过这个项目为大家分享uniapp开发鸿蒙应用从配置开发环境到应用打包上架的完成过程。昨天的文章实现了应用首页的轮播图,其中涉及到为轮播图设置样式,放一小段代码带大家回顾一下:.swiper-item{ width: 100%; height: 100%; display: block; t...

大家下午好,今天依然为大家带来鸿蒙跨平台开发教程的分享,我们本系列的教程最终要做一个购物应用,通过这个项目为大家分享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##购物#

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。