SnowKagura‘s blog - important
type: channel
link: https://www.snowkagura.com/tag/important/
items: 关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案
items: 关于css中选择器的优先级问题

关于CSS中transition属性导致页面第一次加载时出现变换动画的解决方案
type: item
date: 2021-03-31T17:08:00+08:00
description: 今天玩页面设计的时候，无意中发现有这种问题存在在网上也找了解决方案，但是发现，都是用jQuery解决的，或者就是把css直接写到html文件里面来解决的，没有一个用原生js来解决。关于这个问题的原因，似乎是因为放在文件中进行加载就会导致先读取css，然后此时文档还没有初始化，所以就会出现初始化文档时的动画变换。解决方案第一个就如同上面所说，把css放进html中的style中，便能正确按照顺序进行加载，从而不会导致尴尬的动画变换第二种方法，给body加上一个类，比如说叫做preLoad,那么就是如下 ... 然后在css中加上一个类，里面写上.preLoad * { transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }这里说白了，就是在加载文档之前，先把所有的transition全部禁掉，等到初始化完了，再在最后的js中，把这个class移除来解决这个问题 document.onreadystatechange = currentState function currentState() { //这里判断文档是否加载完成，加载完成就移除preLoad类 if (document.readyState == 'complete') { let body = document.getElementsByClassName('preLoad')[0] body.classList.remove('preLoad') } }在此做个记录，作为自己踩坑的笔记PS:是在玩动态名片的时候发现的坑，目前已经完善了：动态卡片

关于css中选择器的优先级问题
type: item
date: 2020-09-22T22:57:00+08:00
description: 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。百位： 选择器中包含ID选择器则该位得一分。十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。个位： 选择器中包含元素、伪元素选择器则该位得一分。[scode type="yellow"]注: 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。[/scode][scode type="red"]警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。[/scode]!important有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。[scode type="yellow"]注： 覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级。[/scode]