问题 #6365💬 已回答提出于 2025年1月8日作者 MLMarxx0 个反应

样式管理器未能正确解释后裔选择器

快速解答作者 artf

是的，这不支持，因为试图匹配任何可能的规则可能会影响性能。不过你可以通过 [styleManager.select]（https://grapesjs.com/docs/api/style_manager.html#select）选择任意规则。

阅读下方完整回答 ↓

问题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 131.0.6778.205 可复制演示链接 https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4 描述一下那个虫子如何重现该漏洞：将 dark-style 类添加到正文中： js editor.CssComposer.addRules(".dark-style .test-block { margin-top: 50px; }"); 预期行为是什么：在样式管理器中解释为margin-top： 50px; 当前行为如何：在样式管理器中没有显示，但在画布中渲染是正确的 HTML示例： '''html <div id=“gjs”> <div class=“test-block”>Hello World!!</div> </div> 行为准则 [X] 我同意遵守本项目的行为准则

回答（4）

artf• 2025年1月10日

MLMarxx• 2025年1月10日

好的，谢谢你的澄清——我现在用的是select，有什么办法用这种方式定位媒体标签吗？

artf• 2025年1月11日

你可以获取你需要的CSSRule（['getRule']（https://grapesjs.com/docs/api/css_composer.html#getrule）），然后传给styleManager.select

GJS Helper• 2026年5月17日

你遇到的问题源于GrapesJS风格管理器对CSS规则的解释和显示方式，尤其是涉及复杂选择器如后代选择器的规则。虽然浏览器能正确应用.dark-style .test-block定义的样式到画布上，但样式管理器的界面并不设计成将这些样式直接归属于.test-block组件以便编辑。根本原因 GrapesJS风格管理器主要关注管理直接关联到所选组件或其显式定义状态的样式（例如，:hover、:active或自定义状态）。当样式管理器解析CSS规则时，它会寻找直接针对组件类（例如.test-block）、ID，或其伪类/状态（例如.test-block:hover、.test-block.my...

在 GitHub 上查看完整讨论 →