停止覆盖 CSS 属性

Posted 2023-03-06

【中文标题】停止覆盖 CSS 属性

【英文标题】：Stop the overriding of CSS property

【发布时间】：2015-02-03 12:28:01

【问题描述】：

What do the crossed style properties in Google Chrome devtools mean?

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

回答 - https://***.com/a/3047117/2232902

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

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

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

【问题讨论】：

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

划掉的属性也可能意味着它们无效（在 chrome 开发工具中还有一个带有! 符号的黄色三角形）

【参考方案1】：

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

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

.example 
   color: red !important;

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

【参考方案2】：

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

.example-class 
    width: 500px !important;

您可以阅读它here