不使用 JavaScript 也能直接修改样式？听起来有点不可思议，但是接下来我就带你一起来看看这个神奇的效果是如何实现的。
先来看效果，建议在 Chrome 浏览器中查看：
浏览器样式
大家有没有思考过一个问题？为什么我们在写html代码的时候，例如<h1>标签，为什么它的字体就是那么大？为什么它会加粗？
有的人心里可能已经有答案了，有的人可能还在等我给出答案，答案先不着急，我再问下一个问题。
为啥我们在写meta、head、title、style、link、script等标签的时候，为什么它们会不显示？
ok，停止思考，打开浏览器控制台，找到样式面板，定位到我上面说的这些标签，看看它们的样式是什么？
来看看我上面的截图，定位到<head>标签，看看它拥有一个样式display: none。
display大家都认识吧，display: none大家都知道是什么意思吧，就是不显示。
这里只为引出display，接下来我们再看另一个属性。
contenteditable
contenteditable是一个非常有意思的属性，它的作用是让元素变成可编辑的，也就是说，我们可以直接在浏览器中修改元素的样式。
它是一个可枚举属性，它的值必须是true或者false，默认值是false。
如果没有设置contenteditable的值，那么它的值就是空字符串，并且可编辑。
为啥要说这个属性呢？因为它可以让我们直接在浏览器中修改元素的样式。
display 和 contenteditable 的碰撞
上面说到meta、head、title、style、link、script等标签的样式都是display: none，那么我们现在将style修改为display: block，看看会发生什么？
<!DOCTYPE html>
<html>
<head style="display: block;">
<title>不用javascript修改样式</title>
<style style="display: block;">
html {
background: red;
color: #fff;
}
</style>
</head>
<body>
</body>
</html>
注意：这里同时将
<head>和<style>标签的display属性修改为block，这样它们才能显示出来。
哦豁，咱们写的样式显示出来了，接下来大家应该都知道该怎么做了吧？
接下来修改一下空白符显示的样式，将white-space属性设置为pre，再加点过渡效果，接着我们就可以不使用javascript，直接修改样式了。
<!DOCTYPE html>
<html>
<head style="display: block;">
<title>不用javascript修改样式</title>
<style style="display: block;white-space: pre;-webkit-user-modify: read-write-plaintext-only;" contenteditable>
* {
transition: all .3s;
}
html {
background: red;
color: #fff;
}
</style>
</head>
<body>
</body>
</html>
注意：这里使用到了
-webkit-user-modify: read-write-plaintext-only;，目前这个属性只能在webkit内核的浏览器中使用，其他浏览器均不支持；
如果不加这个属性，那么换行符 和 空格符 等特殊字符都会被转义，这样样式会失效，所以在 Chrome 浏览器中使用最佳。
