当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-05-21 17:56 3 浏览

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

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

.swiper-item{

width: 100%;

height: 100%;

display: block;

text-align: center;

}

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

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

类选择器

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

.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##购物#

CSS Id 和 Class选择器

上一篇：CSS 选择器优化::where() 的妙用，让你的代码更优雅!
下一篇：jquery选择器

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?