uni-app全局样式与局部样式

发布时间：2023-04-24 14:21:04 所属栏目：教程来源：

导读：全局样式会作用在所有页面上面。有了全局样式，我们就不必在每个页面上写重复的样式代码了，在提高我们工作效率的同时，也方便我们后期对项目的优化和维护。开发 uni-app 项目时，我们会将全局样式定义在 App.vue 文

全局样式会作用在所有页面上面。有了全局样式，我们就不必在每个页面上写重复的样式代码了，在提高我们工作效率的同时，也方便我们后期对项目的优化和维护。开发 uni-app 项目时，我们会将全局样式定义在 App.vue 文件中。
局部样式会作用在特定的页面上面，当全局样式与局部样式冲突时，局部样式会覆盖掉全局样式。我们通常将局部样式定义在 pages 目录下的 .vue 文件中。

全局样式与局部样式冲突
下面来举个实际例子看看当全局样式与局部样式冲突时，页面是如何显示的。

编辑 App.vue 文件，添加全局样式，将页面背景颜色定义为绿色，按钮宽度设置为50%，全局样式将影响到所有页面。
实例：

page {
   background-color: green;
}
button {
   width:;
   margin-top: px;
}
这里定义的 page 标签，相当于普通项目中的 body 标签，会影响到所有的页面样式，通常我们会在这里面设置页面的背景颜色、字体样式、大小等。

接下来编辑 pages/index/index.vue 文件，添加局部样式，将页面背景颜色定义为红色，局部样式将影响到 index 页面。

我们实例中定义的局部样式与全局样式冲突的地方主要是 background-color 背景颜色属性，全局样式中定义的是 green 绿色，局部样式中定义的是 red 红色。
实例：

page {
background-color: red;
}
button {
height:px;
}
点击工具栏–运行–运行到内置浏览器，查看效果。
局部样式红色背景覆盖了全局样式绿色背景。
按钮没有冲突的样式，既显示了全局样式中定义的宽度，又显示了局部样式中定义的高度。

选择器是应用
选择器就是 html 标签的某个特有属性，如 id class 等，在css中可以根据这些特有属性来统一定义样式。

目前 uni-app 规定支持的选择器有 .class、#id、element、element, element、::after、::before 这6个，我们来实例演示一下：
先在 template 标签中定义几个布局。
实例：

<button class="list1" id="column">list1</button>
<button class="list1">list2</button>
<button class="list2">list3</button>
<view class="list2">list4</button>

.class 选择器
使用 .class 定义样式，比如 .list1，就表示定义的是所有 class 为 list1 标签的样式。
实例：

<style>
.list1 {
width: ;
}
</style>

#id 选择器
使用 #id 定义样式，比如 #column，就表示定义的是 id 为 column 标签的样式。
实例：

<style>
#column {
width: ;
}
</style>

element 选择器
根据标签来定义样式，下面来定义所有 button 标签的样式
实例：

<style>
button {
width: ;
}
</style>

element, element 选择器
可以同时定义多个标签，标签之间用逗号隔开。
实例：

<style>
button,view {
width: ;
}
</style>

::after 和 ::before 选择器
::before 和 ::after 的主要作用是在标签内容前后加上指定内容
实例：

<style>
button::before{
   content: 'Hello';
}
   button::after{
   content: 'Imooc';
   }
</style>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!