css 款式载入的优先选择级应用工作经验共享

日期:2021-03-21 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

昨日新项目开发设计全过程中,遇到1个款式载入优先选择级的难题。

界定了class,在网页页面最开始载入的全过程中是被鉴别出来了,当载入结束后的1一瞬间,款式像被重新写过了1样,界定好的margin-bottom不起功效了。控制由于沒有这个款式就挤在了1起。

检测中FF和Chrome全是能够的,IE8有难题,可是用IE developer专用工具是能够看到这个margin-bottom被鉴别出来了,也沒有被重界定。

难题较为奇异。

这个网页页面并不是一般的构造,网页页面內容是多线程转化成的,而并不是以前早已写好各种各样元素的一般网页页面。至于在载入完的1一瞬间是被甚么给重界定了都还没寻找缘故。状况是在其中的挤在1起的表模块素随意点一下1个,它所属的控制模块的全部表单都会载入margin-bottom款式,就不容易再挤在1起。或用IE developer专用工具,先把margin-bottom前面的勾点一下为不选,随后再点一下选定,这样网页页面上全部沒有鉴别margin-bottom的表模块素都会一切正常载入这个款式。

但这毫无疑问并不是处理难题的方法,不可以让顾客看到这个难题,UI是最能触动客户的一部分,也是最非常容易惹恼客户的一部分。

接着试了几种方式,专业写1个款式界定margin-bottom,而并不是伴随着其他界定1起,不好;

加!important这类优先选择级很高的方法也不好;

立即写style优先选择级还比不上!important,而且编码冗余太多,缺点更多,不好;

随后试了1个方式,script的方式,可行,编码以下:

拷贝编码
编码以下:

<script type="text/javascript">
document.getElementByClassName("mar_b_10").style.margin-bottom="10px";
</script>

实际上便是再申明1遍,跟class是一样的內容,访问器就可以鉴别了。JS操纵的款式目标,document.getElementByClassName("mar_b_10").style.margin-bottom="10px";1般状况是JS操纵的款式优先选择级高,由于常常DOM实际操作是在DOM树载入结束以后。在DOM树载入结束,这个情况下我写了js开展重界定,就沒有其他再对这次款式界定开展遮盖,結果就较为令人满意。

1般状况下:

[1位关键标示位] > [4位独特性标示] > 申明前后次序

!important > [ 内联款式 > ID挑选器 > 类,特性,伪类 挑选器 > 元素标识,伪元素 挑选器 ]

应用!important能够更改优先选择级別为最高,其次是style目标,随后是id > class >tag ,此外,此外在同级款式依照声明的次序后出現的款式具备高优先选择级。