【微信小程序】基础篇 -- WXSS 模板样式- 全局样式和局部样式（十四）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是优快云，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
  
  

您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

---

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第14篇文章;
  今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏，【源代码下载地址】。

---

一、全局样式和局部样式

  前面已经介绍了WXSS模板语法-rpx & import，通过栗子学习了WXSS模板语法如何导入公共样式。接下来就来讲解一下另外一个WXSS模板语法–全局样式和局部样式。话不多说，让我们原文再续，书接上回吧。

1、全局样式

  定义在 app.wxss 中的样式为全局样式，作用于每一个页面。通过下面的栗子来学习一下：

app.wxss

  对全部的view组件进行样式设置，注意这里要换算单位的，比如要设置5 px，对应就是10 rpx。

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: darksalmon;
}

  可以来看一下运行效果：

2、局部样式

  在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。通过下面的栗子来学习一下：

全局样式 app.wxss

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: darksalmon;
}

局部样式 cshPageTab.wxss

view{
  background-color: lightpink;
}

  这样的话，局部样式的 view 背景颜色会覆盖全局样式，可以来看一下实际效果：

注意：

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

3、样式权重

  每个样式都有自己的权重，对于局部样式和全局样式权重极其重要，因为样式之间的覆盖是根据权重大小来的。
  只要把鼠标放在样式上就会有出权重页面，下面以上面的栗子来查看全局样式和局部样式的权重：

全局样式 app.wxss：

局部样式 cshPageTab.wxss：

   可以通过查看上面栗子中全局样式和局部样式权重比都是一样的，所以局部样式能覆盖全局样式。

   那么问题来了，如果全局样式的权重比局部样式高会是怎么样的效果呢？接下来就通过下面的栗子来看一下吧

全局样式 app.wxss：

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: darksalmon;
}

view:nth-child(3){
  background-color: lightskyblue;
}

局部样式 cshPageTab.wxss：

view{
  background-color: lightpink;
}

  从前面的栗子可以知道局部样式和全局样式 view 的权重比都是 Selector Specificity: (0, 0, 1)，这里只需要看一下 view:nth-child(3) 的权重比即可。

  上图中可以看出view:nth-child(3) 的权重比为 Selector Specificity: (0, 1, 1)，局部权重还要大，所以按理局部样式无法覆盖，来看一下运行效果：

---

总结

  感谢观看，这里就是WXSS 模板样式- 全局样式和局部样式的介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

• 😀 【LeetCode题解（持续更新中）】
• 🌼 【鸿蒙系统】
• 👑 【Python脚本笔记】
• 🚝 【Java Web项目构建过程】
• 💛 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！