选择器带id和类选择器的顺序，id-selector后空格

Question

我目前正在开发一个网页应用，我们将这个项目集成为图形界面编辑器来定制环境。 我们的图形界面组件是从数据库加载和解析的。例如，我们可以通过一个ID来识别按钮、数据网格等（例如“17190fbd-13d6-430f-bb32-1a09d2151a77”）。这些组件由多个嵌套的 HTML 元素由框架构建，框架会添加样式类。 我现在的目标是通过类似“#ancestor-id .framework-class1.framework-class2”（例如 '#17190fbd-13d6-430f-bb32-1a09d2151a77 .my-text-label'）访问 GrapesJS 的内部元素。 我在画布加载后，会为每个嵌套元素添加id-selector： 'allComponents.forEach（（component： any） => {' ' const ancestorId = this.getAncestorId（component）;' ' const idSelector = selectorManager.add（'#${ ancestorId }'）;' ' const...

dintifla · Accepted Answer

简短更新：

我用 'selectors.unshift（idSelector）' 而不是 'selectors.add（idSelector）' 时，成功让选择器的顺序正确了。

现在我仍然遇到id-和class-selector之间缺失空格的问题。

直到现在，我一直找不到进入“Selectors.getFullString（..）”的方法。改变行为

artf · Answer

你好@dintifla SelectorManager并不是设计成那样工作的（你只能混合使用'.class1.class2'类，但不能用ID），但说实话，我不太明白你使用SelectorManager的目的是什么。 如果你需要在编辑器中查询组件，只需这样做：'anyParentComponent.find（'#my-id .my-class'）[0]'

dintifla · Answer

你好@artf谢谢你的回复。归根结底，这不仅仅是查询一个组件，而是生成它的CSS。我不需要 HTML，因为我的应用是用富客户端应用设计的，以抽象表示存储到数据库，然后解析成 DOM。因此，我无法使用GrapesJS生成的ID，因为我无法存储HTML（或其他DOM的任何表示）。最终，我期望我的所有规则都是这样写的：“#top-level-component-id .my-class { ...} 举个简单的例子，比如生成的按钮 HTML： '''html

关闭

` 要更改该特定...

选择器带id和类选择器的顺序，id-selector后空格

问题

回答（3）

相关问答

程序化添加新职业

：我正在尝试复制页面，但由于 ID，样式无法应用，结尾的 -2，-3 发生了变化。

如何添加带有内联样式的新HTML元素？

ToggleStateCls 返回 js 错误

与此问题匹配的付费插件

浏览插件分类