Chrome 工作区中 style.css 的更改未显示答案

【问题标题】：Changes to style.css in Chrome workspaces not showing upChrome 工作区中 style.css 的更改未显示
【发布时间】：2014-12-03 22:01:00
【问题描述】：

我一直在尝试使用 Chrome 工作区更有效地编辑我的 WordPress 子主题中的 CSS。我按照http://wordimpress.com/using-chrome-devtools-workspaces-for-faster-wordpress-development/ 的教程进行了设置。它在大多数情况下都有效，当我在子主题中编辑任何元素时，修改会立即显示在我的浏览器窗口中，我可以将其直接保存到本地 style.css 中。

当我想在我的子主题中添加一个新元素时出现问题（这个元素已经存在于父主题中但我之前不需要修改它，所以它不存在于子主题中）。使用检查工具，我在父 style.css 中找到了该元素，然后将其复制到我的子主题编辑器（在 devtools 的 Source 选项卡中）。但是，一旦我这样做，对该元素的任何修改都不会反映在实时浏览器中。

例如，这是父样式中的原始代码：

media="all"
.widget a {
color: #777;
}

然后我将其复制到我的子样式表并将其更改为 color: #000 。但是在实时浏览器中看到的颜色没有变化。

我做错了吗？

【问题讨论】：

你是如何添加元素的？它是哪种元素？..请显示代码

标签： css wordpress google-chrome-devtools

【解决方案1】：

添加 !important - 覆盖现有的 css 属性

希望有效果

media="all"
.widget a {
color: #777;
}

改成

media="all"
.widget a {
color: #000!important;//change
}

【讨论】：

感谢您的回复...但是当子主题应该默认覆盖父主题时，为什么我必须这样做呢？听起来其他地方会出错..
因为它会首先引用父项，如果您发布详细代码，我可以正确解释您。还有一件事有效吗？

【解决方案2】：

如果您使用的是 Google Chrome，请执行以下操作

转到设置
清除浏览数据
检查所有标记
消除过去一小时或一天，具体取决于它何时正常工作。
点击清除浏览数据

对我来说它有效。

【讨论】：

【解决方案3】：

这可能是 WordPress 添加的缓存破坏查询字符串-

这是relevant Chromium bug report。

现在，将其添加到 WordPress 中的 functions.php 以删除缓存破坏后缀，我可以重新启用持久编辑：

function yourthemename_remove_version( $url ) {
    return remove_query_arg( 'ver', $url );
}

add_filter( 'style_loader_src', 'yourthemename_remove_version' );

在未来，看起来像错误报告末尾推荐的 Persistence 2.0 将成为解决方案。现在可以是enabled as a Chrome DevTool experiment。请注意，Chrome Canary还不能在 Linux 中运行。

来源：https://stackoverflow.com/a/42542366

【讨论】：