CSS 的堆叠标准表明

日期:2020-10-25 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

全部全过程
搜索competing rule集。
对competing rules开展排列;
对元素,运用sorted rules中的特性(堆叠全过程,高优先选择级的在上面,遮盖了下面低优先选择级的特性)
最终3D渲染,考虑到承继值(也是个堆叠全过程)和默认设置值, 再做特性值变换。
标准便是 general ---> special
搜索环节
遍历全部css rule, 找出合理的rule.

Rules 排列
先 selector group,后 position group
selector groups:(从高到低)
1. !important 最高
2. inline style
3. id selector
4. class and pseudo-class pseudo-element, attribute selector
5. element selector
6. * universal selector

先看群组级別,
最高群组同样的话, 再看本群组的積分(是多少个),
假如数量同样,就要看更低的群组,反复;

假如还同样,就要看 postion group:

position group:
1. <style> css rule</style>
2. <style> @import css; <style>
3.<link />
4. <link /> ----> @import css; 外界文档中的@import css中的rule
5. user setting style ,假如在这里的款式应用了 !important那末便是最高的级别了(比文本文档中的!importance还高,反强奸)
6. user agent css 访问器默认设置款式

先看部位群组级別,假如同样就看在文本文档中出現的次序(后边遮盖前面)
这样就为 元素 得到了全部的rule中特性值,最终创建了 doc 的css特性树。

3D渲染环节
3D渲染的情况下,取元素的已有css特性值出来3D渲染;

针对CSS特性树中沒有的特性,假如这些特性能够被承继,那末就考虑到元素的祖父结点中的特性值;

假如還是不可以明确特性值, 这时候应用就应用特性的默认设置值。

上面的就把元素的全部值明确了,但由于一些值是相对性值( 10%, 2ex等),这时候必须把相对性值测算出 肯定值, 并不是全部值的是合理的,这时候又要变换成具体值(标值取整等)。

最终访问器用这些 actual attribute value 去3D渲染。

其它:

视觉效果承继(z序): 子元素在父元素上面,后边的元素在前面的元素的上面,默认设置情况是全透明。

检测发现:*.class == .class