由于 CSS，Codemirror 显示不正确

Question

我的 CSS 代码导致 Codemirror 显示不正确。见下文：

如何防止我的样式影响 Codemirror 创建的元素，以便 Codemirror 正确显示？

即使我设法调整我的 CSS 代码，使我的页面和 Codemirror 都能正确显示，但将来这将是一场噩梦，因为任何未来的样式都可能影响 Codemirror。此外，我的 CSS 文件是根据客户端提供的值动态生成的，这使事情变得更加复杂。

一个可能的解决方案是创建一个名为 not-codemirror 的 class 并将其应用于我网站上的每个元素，但 Codemirror 的元素除外。这对我来说似乎有点矫枉过正，尤其是考虑到大多数页面不会使用 Codemirror。所有页面共享同一个 CSS 文件。

此外，如果可能的话，我更喜欢非 jQuery 解决方案。谢谢

编辑

我现在显示为：

它应该是这样的：

我补充了：

display: inline;
margin: 0;
padding: 0;

到 .CodeMirror span 在 codemirror.css.

Answer 1

您知道问题出在相互冲突的 CSS 声明中，因此我建议为您或 Codemirror 的每个相互冲突的标签提供 class 以消除混淆。很明显，Codemirror 应该是您要更改的那个，因为听起来您似乎非常受网站动态 CSS 的约束。这个 'targeted' 解决方案比使用 not-codemirror 标签攻击整个站点要简单得多（谢天谢地，不涉及任何 jQuery），而且我认为它不会那么困难如果您对自己的代码比较熟悉，请弄清楚要在 Codemirror 的源代码中更改什么 CSS.

如果你运行也遇到了特异性问题，你可以证明使用 !important 标签是合理的，但原则上我会尽量避免这样做。

Answer 2

Codemirror 标记具有特定的 class .CodeMirror（至少在最新版本中存在）；

所以如果你想让其他风格不冲突你可以使用.not :

clashing-selector:not(.CodeMirror)

由于 CSS，Codemirror 显示不正确

Codemirror displaying incorrectly due to CSS

html

javascript

css

codemirror