使用经验共享的CSS样式优先级排序
在昨天的项目开发过程中,遇到了样式加载优先级的问题。
类定义。它在初始页面加载过程中被识别。加载完成后,样式被重写。定义良好的边距底部不起作用,控件被挤在一起,因为它们没有这种样式。
在测试中,FF和Chrome都是正确的,IE8有问题,但是IE开发者工具,我们可以看到边缘底部的认可和不重新定义。
这个问题很奇怪。
这个页面不是一个普通的结构,页面的内容是异步生成的,而不是一个已经写入所有元素的公共页面。如果你点击其中一个,所有形式的模块将负载将加载缘底风格,所以不会挤在一起了。或者使用IE开发者工具,点击第一缘底是选择前面的勾,然后点击检查,所以所有的表单元素,不页边距将加载方式识别正常。
但这肯定不是解决问题的办法。它不能让客户看到这个问题。UI是用户最活跃的部分,也是用户最易受攻击的部分。
然后尝试几种方法来编写一种样式来定义边距底部而不是其他定义。
添加!重要的是没有很高的优先级。
直接写样式优先级不如!重要的是,代码冗余太多,更多的缺点,不是;
然后尝试一种方法,脚本方法,可行的,代码如下:
复制代码代码如下所示:
document.getelementbyclassname(mar_b_10)。风格。缘底=10px ;
事实上,它是一个重述,内容类一样,浏览器可以identified.js控件的样式对象,document.getelementbyclassname(mar_b_10)。风格。缘底=10px ;在一般情况下,JS控制的优先级高,因为DOM操作总是在DOM树加载完成。当DOM树是装的,我在这个时候写js的重新定义,并没有别的盖风格的定义,取得了满意的结果。
通常 uff1a
{ 1位重要标志位{ 4位特殊性符号}顺序声明
!重要的>内联样式>选择器选择器>类,属性,伪类选择器>元素标签,伪元素选择器}
使用!重要的是,可以将优先级更改为最高级别,然后是样式对象,然后是id >类>标签。此外,声明后出现在同一层次的样式是高度优先的。