全局设置display: inline时，为何JS/CSS文本会被渲染？

你遇到的情况是因为全局CSS选择器 * 会匹配页面上所有DOM元素，包括JSFiddle编辑器界面本身用来存放CSS、JS代码的容器元素。

这些代码容器元素原本默认是隐藏或者以非可见的布局方式存在（比如设置了display: none或者被编辑器界面的样式隐藏），但当你设置 * { display: inline } 时，强制把所有元素的display属性改成了inline，导致这些原本不应该显示的代码容器元素也被渲染展示在了页面上。

如果只想让样式作用于自己编写的HTML内容，建议给自定义内容加一个父容器，比如：

<div class="my-custom-content">
  <p>Hi</p>
  <p>Bye</p>
</div>

然后把CSS改成针对这个容器内的元素生效：

.my-custom-content * { display: inline }

这样就只会影响你自己编写的内容，不会干扰JSFiddle的界面元素。

内容的提问来源于stack exchange，提问作者Jerry