为什么控制台不能修改css样式

Question

在网页上看到的本来想学习一下，发现不能修改样式调试。请教大神们图片中的这种情况是怎么回事？？火狐浏览器能修改调试样式，但是找到内部样式表打开发现是空的（样式编辑器最后一个74规则）

Answer 1

上面说的都什么啊。。。

之所以是这样，看他的style上面的属性，应该是用了第三方的 styled-jsx 之类的东西。

这个库里面有用到这样的API： https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule

可以直接在样式表中添加规则，但是页面上不显示出来，自然也是没法修改的。可以看到你截图里面不能修改的地方背景色是灰色的禁用状态。

举个栗子：

<div class="hello">Hello World</div>

var s = document.createElement('style')
s.type = 'text/css'
s.setAttribute('data-x', '')
var h = document.head
h.appendChild(s)
var ss = document.styleSheets[document.styleSheets.length - 1]
ss.insertRule('.hello{color: red;}', 0)

检查页面元素就可以看到，生成的这个 <style> 里面是空的，但是div的样式是有的。

Answer 2

这是写在内部样式表里的,想修改直接新建一个同名class覆盖即可

Answer 3

如果是 Chrome 的话，可以按 F12 在 Elements 这个页面里修改 Styles 里的 css，可以及时生效。

Answer 4

chrome的bug而已，先开控制台，再刷新页面，即可解决。