在基于web的HTML编辑器、la Dreamweaver和其他编辑器中显示div周围的轮廓

我正在编写一个简单的基于contenteditable的HTML编辑器，它允许用户编辑一个由他们自己的CSS（他们可以实时编辑）设计的页面，还可以做一些基本的事情，比如插入新标签、应用类等

我想要的一个特性是，可以切换div周围虚线边框的显示，这与您通常在所见即所得HTML编辑器（如Dreamweaver、Expression Web和其他许多编辑器）中看到的非常相似。（这有助于用户查看她的div，即使它们没有可见的边框。）

有什么可能的方法可以做到这一点吗？一些想法：

我不能简单地修改实际/现有div上的CSS，因为它们可能已经定义了自己的边界，我不应该用点来删除它们。理想情况下，我可以在现有边界周围显示边界，这就是前面提到的商业编辑器中显示的内容。即使我退回到在没有现有边界的元素上实际设置边界，找出哪些元素没有边界也可能很困难，特别是在遇到诸如动态更改计算样式的

：hover

之类的情况时

我可以将这些div包装在新div中，而新div又有点边框。棘手的部分是处理他们的CSS，例如：

• 包装器的样式必须与其子项类似，例如，宽度为

  width:50px

  的div必须具有宽度为

  width:50px

  （大致上）的包装器，因此我要么需要持续轮询（因为无法收到间接样式更改的通知，例如在类上）以获取对计算样式的更改（这是完全不可伸缩的），或者实现我自己的CSS引擎，该引擎运行并确定每次用户实时编辑他们的CSS时发生的更改

• 用我自己的div污染DOM是入侵性的，并且会干扰规则，例如：

  /* these may or may not be divs */
  .a > .b > .c { ... }
  

  或：
  或许：

  /* immediate children of my wrappers would inherit the dotted borders */
  .foo { border: inherit; }
  

  也许有一种方法可以自动有力地重写这些规则——以最后一个例子为例：

  :not(.my-dotted-border) > .foo { border: inherit; }
  

  但是，即使理论上可能，也有大量的病例需要担心，这将是相当棘手的

• 最后，也许有一种方法，即使有虚线边框，也可以折叠边距，但我不知道

另一个想法是在顶部覆盖边框（根据基础元素的尺寸/偏移量，使用JS绝对定位），但对于具有特定z索引的重叠元素来说，这很难看，我需要再次监视所有元素的样式更改。除了现在，仅监视显式指定样式中的更改是不够的，因为我需要对更改做出反应，即使是偏移量和尺寸（例如，如果用户键入一些文本，它可能会按下它下面的所有元素，因此我必须通过更新覆盖来对此作出反应）

一个相关的问题是，但这是从希望看到大纲的用户的角度来看的——我是从基于web的编辑器实现的角度问，如何提供这些大纲

---

提前感谢您提供的任何提示。

您可以使用

轮廓

和

轮廓偏移量

CSS属性来设置可编辑div的轮廓样式，因为它们不会覆盖任何现有边框（但是，如果存在任何现有轮廓，它们将覆盖任何现有轮廓）

---

查看此示例，了解如何实现它：

你是对的，它只是另一种普通样式，与其他样式一样可以由用户指定。我现在将此答案标记为已接受，因为

outline

是（IME）在DIV上很少使用的样式，并且很容易在此处应用，但它确实被使用（Bootstrap是

大纲

——对其输入元素和按钮感到满意）。

:not(.my-dotted-border) > .foo { border: inherit; }