contenteditable style

JavaScript

style 本身是一个标准的 HTML 标签,在里面写的 CSS 样式,会被应用到页面上。同时,作为一个 HTML 标签,style 本身也可以被赋予一定的展示样式(比如将默认的 style { display: none; } 给覆盖掉)。加上 contenteditable 的属性,就会得到一个可编写的 style 标签。通过直接编写其中的 CSS 样式,页面会自动更新,展示应用样式后的效果。

上面展示的这个圆点,鼠标悬停之后,就会显示一个可输入的框。在里面输入一些 CSS 可以看到对页面元素的修改。比如,可以试试输入:

article small:nth-child(3) { color: #007acc; }

几点注意:

  1. 直接复制上面的 CSS 然后黏贴不会起效,因为样式也被黏贴到 style 里面去了,这会导致 style 里的内容不是合法的 CSS,无法应用样式
  2. CSS 需要写在一行里面,回车会导致插入 <br />,同样会导致 CSS 语法错误,无法应用样式