养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

详解WXSS中样式选择器的优先级及使用

时间:2024-11-01 03:38:38

整体而言,掳姗浚瑙WXSS是自顶向下,自左向右执行的,即对于同一种选择器获取的页面元素,其最终应用的样式是后定义的样式覆盖前面定义的同名样式。但对于不同类型的选择器,该规则并不适用。眺螗熨膣本篇经验将基于第一个手工构建的微信小程序演示,具体构建步骤,可以参考如下经验引用。

详解WXSS中样式选择器的优先级及使用

工具/原料

微信开发者工具

方法/步骤

1、在小程序页面对应的wxml文件中,为<view>标签定义一个id属性和class属性。

详解WXSS中样式选择器的优先级及使用

2、演示类选择器的优先级高于元素选择器的优先级在wxss中,通过类选择器和元素选择器为wxml中的view组件设置同样的样式,并且类选择器的样式定义在前;保存编译后,模拟器显示类选择定义的样式生效。

详解WXSS中样式选择器的优先级及使用

3、演示ID选择器的优先级高于类选择器的优先级在wxss中,通过ID选择器和类选择器为wxml中的view组件设置同样的样式,并且ID选择器的样式定义在前;保存编译后,模拟器显示ID选择定义的样式生效。

详解WXSS中样式选择器的优先级及使用

4、演示内联样式的优先级高于类选择器的优先级保汤手刿怫持wxss文件内容不变,在wxml中,通过内联样式叵萤茆暴(即元素的style属性)为页面view组件设置样式,保存编译后,模拟器显示通过内联样式定义的样式生效。

详解WXSS中样式选择器的优先级及使用

5、演示添加!important标识后的样式优先级最高保持wxml内容不变,在wxss中的类选择器定义的样式后面添加!important标识,保存编译,模拟器即显示通过该类选择器定义的样式生效。

详解WXSS中样式选择器的优先级及使用

© 一点知识