根节点CSS:根节点CSS面板里的CSS是作用到整个页面。导入外部HTML时通常先把相关CSS粘贴在这里。一个常用的做法是先在这里写一个合适的复合选择器再到对应的组件样式面板里选中此选择器后做可视化设计。CSS选择器的前后顺序会影响优先级,有时候需要手动调整以改变其优先级。
共享组件CSS:同根节点,区别在于它还影响也使用此共享组件其它页面。
组件CSS:选中一个组件(非根节点也非共享组件),第一个是组件样式,其它的是页面CSS或共享组件CSS在这个组件上的投射(有影响到它的CSS)。点击其中一个选择器,下方有列出此选择器还影响到哪些组件,点选其中一个就切换到到那一组件。
组件样式:平台自动用当前组件的#id作为选择器,即使你手动改变id或从其它组件复制过来的,平台也会把id改成当前组件的。手动在下方追加::before {}
或::after {}
,平台也会前面自动补充上当前组件的id,然后就可以在样式面板选中此选择器进行可视化设计了。
如果你喜欢在浏览器开发者工具(F12)里调试样式,可以在对应元素id选择器中任意更改/添加样式,调整完成后在开发环境中切离组件样式再次切换回来就能发现平台里的组件样式跟浏览器开发者工具里刚调整好的样式一样样了;随便在无所谓的地方打个空格让平台知道你做了变动就可以保存这次调整了。 注:此方法对数组数据源下的组件不起作用,它们应该使用页面CSS而非组件样式。
动态样式:直接作用到元素的行内(inline)样式,优先级最高。可以直接从下拉框选择样式,也可以直接输入并回车确定。样式值通常通过表达式来动态变化,不需要小括号包裹。比如根据任务优先级/紧迫程度调整背景颜色,根据任务进度来调整进度条长度。
详见样式与CSS