提交 8050e17a 编写于 作者: W wanganxp

补充css的继承和优先级差异

上级 0a1239e3
......@@ -8,8 +8,14 @@ uni-app x 在 app平台实现了 web css 的子集。
当 uni-app x 编译到 web、小程序等平台时,可以支持 web 的全部 css。同时,**编译器会进行 css 重置**,保证 ucss 这个子集在各端效果的一致性。这也意味着使用uni-app x的web端,和直接在浏览器里写html在默认值处理上有一定的差异。
浏览器、Android原生、iOS原生,都有自己的布局和样式设置系统。
ucss这个子集,是抽取了web和app的共同能力,并通过web的css写法来设置原生布局和样式。
原生App的组件样式都是通过组件的属性设置的。父子组件的属性隔离,样式不会继承。
App端与web常见的区别是:
1. 仅支持**flex 布局**
1. 仅支持**flex 布局**:这是web、iOS、Android均支持的布局方式
2. 选择器**只能用 class 选择器**,不能用tag、#id、[attr]等选择器
3. **样式不继承**,即父元素样式不影响子元素
......@@ -213,6 +219,24 @@ app-uvue的css的“样式不继承”规则,虽然与web有差异,其实只
一般情况下,开发者遵循仅在text组件下写文字有关的样式,就可以编译到全端而保持界面正常。
由于app平台样式不继承,那么在web中继承相关的关键字`inherit``unset`在app中也不支持。
由于web的css中某些属性的默认值就是`inherit`,即继承父,此时在ucss中会修改为一个独立而具体的默认值。
## 样式冲突、优先级@css-specificity
在web中,因为有多种样式的设置方式、父子样式也有继承关系,这导致很多样式冲突。既然有冲突,就需要明确优先级规则。
实际上web的样式优先级规则非常非常复杂,可参考[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)
app中,设置样式只有内联样式即style属性和class属性这两种方式。它们只遵循1个简单规则:`内联样式(即style属性)优先级高于class`
因为没有样式优先级冲突,`!important`这种提权方式在app中也没有必要。
web中因为样式冲突而产生很多样式实际渲染无效,但也需要存在dom里,所以形成了dom属性样式和计算样式的区分。
在app中没有这些区分,只有一套样式。
## 样式作用范围
`uni-app x` 中,不支持 `css scoped`,样式的作用范围遵循以下规则:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册