CSS 在一瞬间显示被覆盖的样式答案

【问题标题】：CSS shows overwritten styles for a split secondCSS 在一瞬间显示被覆盖的样式
【发布时间】：2017-03-21 05:03:35
【问题描述】：

目前，我正在使用来自 third-party library for a UI toggle button 的指令。我稍微更改了切换按钮的背景颜色和左/右位置以满足我的业务规范。例如。开箱即用的样式是浅绿色代表真实，浅红色代表虚假；我将其更改为深绿色为真，浅灰色为假。我还将切换开关的位置向左移动了一点。所有这些都可以正常工作。

我遇到的一个问题是，在呈现带有切换按钮的页面时的几毫秒内，我看到旧样式迅速从开箱即用的样式变为我的更新样式。在这个事实之后，风格上没有任何其他故障，只是初始加载显示元素上的一些快速移动。这不是一个大问题，但我似乎无法确定问题或知道为什么会发生。有什么想法吗？可能是 CSS 层次结构的问题？

与问题相关的说明：

我使用检查器查找需要覆盖的类，因为指令本身只使用了nz-toggle 标记。
我正在使用!important 覆盖。我读到这本身就是不好的做法，但它在整个项目中都被使用，并且已被确立为覆盖样式的“我们的标准”

以下是我的 CSS 文件中的一条规则与开箱即用的规则的示例：

.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}

对比

.nz-toggle-wrap.true {background-color: #60bd68;}

有什么想法吗？

【问题讨论】：

没有代码我们帮不了你
一种可能性是“无样式内容的闪现”。 en.wikipedia.org/wiki/Flash_of_unstyled_content
好像在js添加之前有一些类你可能没有覆盖
添加了一个简单的代码示例。 @jdigital ，这似乎确实是问题所在。我将使用该关键字研究更多解决方案。

标签： angularjs css sass

【解决方案1】：

这是因为您的“新”CSS 在“旧”CSS 之后加载。当然这应该是真的，因为你想覆盖旧的样式，但似乎新旧代码相距太远，因此你设法看到它发生了变化。

要解决这个问题，您必须将新样式“更接近”旧样式。实现方式取决于您的项目架构和构建过程。

另一种选择是仅在页面加载后添加“true”类，这样你的新样式才会生效。

【讨论】：

【解决方案2】：

如果你在本地加载这个“第三方库”，你可能需要直接编辑插件的 CSS 文件。

使用你链接的插件，可能你需要直接编辑这个文件，以防止“闪烁”，这是由顺序加载的样式引起的：

https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl

【讨论】：