停止覆盖 CSS 属性答案

【问题标题】：Stop the overriding of CSS property停止覆盖 CSS 属性
【发布时间】：2015-02-03 12:28:01
【问题描述】：

在使用 Chrome 的开发工具检查元素时，在元素中选项卡，右侧的“样式”栏显示相应的 CSS 特性。有时，其中一些属性会被删除。这些属性是什么意思？

表示应用了划掉的样式，但随后被覆盖通过更具体的选择器、更本地的规则或更高的属性在同一规则内。

有没有办法防止这种行为？
即 - 停止覆盖该属性。

注意 - 我无法控制选择器。

【问题讨论】：

如果它在已发布的网站上，并且您只想更改一两个属性，您可以随时双击该属性，并在末尾添加 !important。如果它是您自己的站点，只需将规则放在 css 文件的更下方，或确保它是更具体的选择。 注意： 内联样式虽然不完全是“对开发人员友好”，但也可能是一种选择（它们的存在顺序更高）
划掉的属性也可能意味着它们无效（在 chrome 开发工具中还有一个带有! 符号的黄色三角形）

【解决方案1】：

并非如此，这就是浏览器呈现页面的方式。

你可以在你的 CSS 上添加一个重要的内容：

.example {
   color: red !important;
}

或者您可以在页面加载后使用 Javascript 更改元素的样式。

【讨论】：

【解决方案2】：

您可以在 CSS 代码中的分号前添加!important。

.example-class {
    width: 500px !important;
}

您可以阅读它here

【讨论】：