时间戳

首页 > 解决方案 > 为什么附加文本的字体系列在可编辑的 div 中会发生变化？

html - 为什么附加文本的字体系列在可编辑的 div 中会发生变化？

问题描述

* {
  font-family: sans-serif;
}

.sample {
  font-family: monospace !important;
}

.sample>* {
  font-family: monospace !important;
}
<div class="sample" contenteditable>
  This is not inside span. <span>Go to the next line and append some text to see inconsistent effects.</span>
</div>

玩弄更多的编辑只会暴露更多的不一致。如何解决？如何将monospace字体设置为里面的所有文本div？我尝试删除!important，但无济于事。

删除<span>是一个选项，但我不能在我正在处理的原始项目中这样做，因为这些元素具有某些格式。我也不能删除*规则声明，因为我想要sans-serifdiv 之外的字体。很烦人，两者都解决了问题。还有什么办法吗？

标签： htmlcsscontenteditablefont-family

解决方案

>选择直系子女。创建新行时，您会注意到span标签被包裹在div.

相反，您可以尝试选择所有span子元素.sample：

* {
  font-family: sans-serif;
}

.sample {
  font-family: monospace !important;
}

.sample span {
  font-family: monospace !important;
}
<div class="sample" contenteditable>
  This is not inside span. <span>Go to the next line and append some text to see inconsistent effects.</span>
</div>

推荐阅读