Shopify：即使在编辑基本 CSS 后也无法删除元素答案

【问题标题】：Shopify: Cannot get rid of an element even after editing base CSSShopify：即使在编辑基本 CSS 后也无法删除元素
【发布时间】：2022-09-29 18:06:22
【问题描述】：

我有一个<p> 元素，我希望通过display:none 删除它。我在主 CSS 文件 (core.css) 中添加以下代码。根据“网络”选项卡，该文件在所有页面上都被引用。此外，在检查元素中，我看到此特定元素的代码来自内联样式，它不是 Shopify 代码编辑器上任何资产文件的一部分，因此无法编辑。这里的出路是什么？

我要添加到core.css 的代码：

p.hulk-powered-wrapper {
    display:none !important;
  }

有问题的页面：https://shop.rallyappliances.com/pages/contact

经过进一步调查，我发现唯一能够编辑此元素的 CSS 文件（添加以下代码有效）是来自应用程序开发人员网站的外部样式表。但是，鉴于 HTML 终于出现在我的网站上，这是否意味着我应该拥有一个覆盖外部 CSS 的主 CSS？在屏幕截图中，我标记了正在加载的 CSS 文件能够进行此更改。

如果内容在 iframe 中加载，则无法覆盖。

标签： css shopify

【解决方案1】：

我在 Chrome DevTools 中添加了相同的代码并且它有效（即，由 HulkApps 提供支持的 Shopify 表单消失了）。

两个问题：

这是您在core.css 中唯一拥有的东西吗？
我不熟悉 Shopify，但在 Magento 2 中，有时 CSS 由于缓存而无法工作。你清除缓存了吗？

更新
1. 我看到您在core.css 中有很多代码。其他一切都有效吗？这是display: none; 唯一没有的吗？
2. 我看到p.hulk-powered-wrapper{display:none !important} 在core.css 内，所以问题不应该与缓存有关。

【讨论】：

其他一切都是默认的 Shopify 代码，所以它可以工作，是的，例如标题字体大小等。这一行是我手动添加的唯一一行，它不起作用。
嗯，如果你创建一个新的 CSS 文件呢？不要忘记将它包含在您的主题中。

【解决方案2】：

看起来 p 标签在 iframe 内，所以也许可以尝试这样的事情（使用 jQuery）：

$("#frame_ai7L9yHu4aWawvcQdO6NJw").contents().find(".hulk-powered-wrapper").hide();

【讨论】：

这应该放在 core.js 文件中吗？
它需要在某个地方的文档就绪块中进行 - 所以只要在页面加载后的某个地方调用它，或者在带有“延迟”的脚本块中调用它。只需要在元素出现在页面上之后运行。先把它放在页脚也许看看它是否有效

【解决方案3】：

你成功了吗？我有两个问题：
- 我们从哪里获得框架参考？ ai7L9yHu4aWawvcQdO6NJw
-你最后把它放在哪里了？
$("#frame_ai7L9yHu4aWawvcQdO6NJw").contents().find(".hulk-powered-wrapper").hide();

谢谢

【讨论】：