页面重新加载后页面控件失去样式答案

【问题标题】：Page controls lose style after page reload页面重新加载后页面控件失去样式
【发布时间】：2020-12-03 21:03:01
【问题描述】：

我有一个单页应用程序，可以将 DOM html 动态转换为页面上的 Kendo 控件，并在浏览器中显示它们。我有一个 SASS 样式表，它为所有控件设置样式，其中一部分如下所示。所有控件都具有 .company-container 类，并且当控件未处于编辑模式且未聚焦时，通过在控件周围放置边框来设置它们的样式。这个样式文件的这个部分和其他部分工作正常，直到我点击刷新重新加载页面。一旦我在 Chrome 中重新加载页面，控件周围的边框就会丢失，即使我清楚地看到 html 结构在那里。页面重新加载后样式表的其他部分加载正常，所以我确定这不是样式缓存问题。我想知道你以前是否有过类似的问题。

正在使用的 .scss 文件的一部分：

.company-container > span span {
       outline-color: $color-brand;
       outline-width: $border-light;
       outline-style: solid;
       outline-offset: $border-light;
   }

【问题讨论】：

嗨，有趣的是，如果正在应用该规则，也许可以在浏览器中检查开发工具？也许它被另一个规则覆盖了

标签： angular sass kendo-ui

【解决方案1】：

我注意到有时 Kendo 样式最终会覆盖我的一些样式表。我要做的第一件事是添加 !important 到你被覆盖的样式中，看看这是否是问题所在。

接下来，您可能需要检查您的 .scss 文件是否在您的 kendo（和所有其他）样式表之后被调用。

您可能还想检查检查器并查看有问题的特定性元素是否指向另一个样式表以获得优先权。（查看 W3 关于特异性的文章了解更多信息https://www.w3schools.com/css/css_specificity.asp）

【讨论】：