微信小程序 公共模板 第1篇
从前面的栗子可以知道局部样式和全局样式 view 的权重比都是 Selector Specificity: (0, 0, 1)
,这里只需要看一下 view:nth-child(3)
的权重比即可。
上图中可以看出view:nth-child(3)
的权重比为 Selector Specificity: (0, 1, 1)
,局部权重还要大,所以按理局部样式无法覆盖,来看一下运行效果:
微信小程序 公共模板 第2篇
可以通过查看上面栗子中全局样式和局部样式权重比都是一样的,所以局部样式能覆盖全局样式。
那么问题来了,如果全局样式的权重比局部样式高会是怎么样的效果呢?接下来就通过下面的栗子来看一下吧
微信小程序 公共模板 第3篇
公共样式文件通常命名为 或 ,并放置在小程序项目的 styles 或 assets 文件夹下。对于大型项目,可以将公共样式按功能模块拆分成多个文件,如下结构:
在公共样式中,变量通常用于定义颜色、字体、间距等基本样式属性。这样可以方便地统一管理这些样式。
定义全局的字体样式,包括字体大小、行高、字重等。
按钮是小程序中最常见的交互组件之一,因此需要定义多种状态下的按钮样式,例如主按钮、次按钮、禁用按钮等。
为项目定义统一的间距和布局样式,使得页面的结构更加整齐一致。