Question

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

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

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

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

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

我做错了吗？

Answer 1

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

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

对我而言，它有效。

Answer 2

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

希望它有效

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

将此更改为

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

Answer 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

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

3 个答案: