Question

我正在使用Code Mirror，我正在努力使一个给定的行完全变灰（因此它看起来像一个注释通常在代码编辑器中看起来像）。到目前为止，我已经想出了这个：

editorDiv = this;

var editor = CodeMirror(function(elt) {
  editorDiv.parentNode.replaceChild(elt, editorDiv);
}, {
  value:       "function myScript(){\n\treturn 100; \n}\n",
  lineNumbers: true,
  readOnly:    "nocursor",
  theme:       "monokai"
});

console.log(editor);

var line = editor.getLineHandle(1);
console.log(line);

editor.addLineClass(line, "text", "greyed-out");

假设我希望return 100;行变为灰色（根据API，编辑器中的第2行和第1行）。我的想法是将greyed-out类添加到此行，并使类类似于：

.greyed-out { color: grey; }

但是，这不起作用，因为Code Mirror中有其他类具有更高的优先级并覆盖greyed-out类。

我不确定是否有通过Code Mirror的API执行此操作的特定方法，或者是从较高优先级类中删除不需要的属性的一般方法。

有人可以给我一些帮助吗？

Answer 1

从另一个类中覆盖规则的最佳方法是为选择器提供更高的特异性，例如：

#container .foo-list li .greyed-out { color: grey; }

或者，你可以在规则上使用!important，但这被认为是不好的做法，应尽可能避免使用。

.greyed-out { color: grey !important; }

Answer 2

在这种情况下，您可以使用!important：

.greyed-out { color: grey !important; }

然而，应尽量避免使用并仅在必要时使用。您还可以通过扩展选择器来提高样式的特异性。

代码镜像 - 使给定的行完全变灰

2 个答案: