我需要隐藏一个小部件的H2

Question

我有一个博客，我在其中使用 GetYourGuide 的附属链接。 特别是，我在此页面中使用它： https://www.visitare.net/best-tours-in-bologna/

我通过 Elementor 的 HTML 小部件插入附属小部件，它带有一个非常烦人的

H2

标题：

我试着用CSS删除它：

.title-banner {display:none;} 
.title-banner[data-v-48b40ecd] {display:none;} 

我也用过

!important

，但是没有用

每次我使用这个附属链接时也会重复这个问题，我不明白为什么 GetYourGuide 必须插入一个标题，这个标题应该是基于博客的。

Answer 1

在你开始阅读这里之前，请阅读我在 OP 问题下的评论。

经过一番思考，作为最后的手段，可以通过某种解决方法来完成。这只是一个想法，也许它会达到目的，尤其是当涉及到移动视图时，它不再有意义了。你只需要在那里做实验。

那到底是怎么回事？这个想法是将

<iframe>

放在一个容器中，设置为

position: absolute;

并用margin-top的

负值

将其拉高一点。最后，我们还需要

clip-path

属性来屏蔽它。 注意： 这是您需要为每个

<iframe>

做的，例如博洛尼亚热门景点、美食之旅等

为了更好地理解这里有一个非常简短的例子。灰色区域实际上是容器。当然，它可以具有与

height

相同的

<iframe>

并且只是为了演示目的而变大。另一方面，红色区域应该代表

<iframe>

。最后，Lorem Ipsum 占位符文本仅表示任意内容。在你的情况下，当然，这将是图像。

我认为将

<iframe>

放入container然后应用下面的CSS规则应该可以使用Elementor。

.iframe-container {
    width: 480px;
    height: 300px;
    background: #ccc;
}

.iframe-dummy {
    padding: 10px;
    width: 460px;
    background: red;
}

.iframe-dummy h2 {
    margin: 0;
    text-align: center;
    color: white;
}

.iframe-dummy p {
    text-align: justify;
    color: white;
}

/* THE WORKAROUND CLASS (see AFTER example in HTML) */

.workaround {
    position: absolute;
    margin-top: -45px;
    clip-path: margin-box;
}

<h2>Before:</h2>
<div class="iframe-container">
    <div class="iframe-dummy">
        <h2>Annoying Title</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>
<h2>After:</h2>
<div class="iframe-container">
    <div class="iframe-dummy workaround">
        <h2>Annoying Title</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

编辑（参考OP的评论）：

你能直接为我的网站给我一个实际的例子吗？

我又看了你的网站，发现合适的container已经存在了。除此之外，您还可以省略设置

position: absolute;

。我不得不提到，由于没有自定义类名或 ID，我不得不求助于那里的内容。我稍后再谈。

首先，这是所需的CSS：

/* Column containing Top sights in Bologna, etc. */

body.page-id-7215 .elementor-element-a8f0323 .elementor-widget-container > div:first-child {
    margin-top: -60px;
    clip-path: margin-box;
}

/* Column containing Useful Links, etc. */

body.page-id-7215 .elementor-element-0ca608c .elementor-widget-container > div:first-child {
    margin-top: -115px;
    clip-path: margin-box;
}

定位说明：

body.page-id-7215

- 需要不对其他子页面生效（唯一页面 ID）

.elementor-element-a8f0323

- 包含博洛尼亚顶级景点，等的左栏的类名

.elementor-element-0ca608c

- 包含有用链接、等的右栏的类名

.elementor-widget-container

- 小部件容器

div:first-child

-

<iframe>

（我们需要的那个）的实际容器

属性说明：
我之前已经解释过这些属性（见上文）。

屏幕截图（通过 DevTools 应用的 CSS）：
https://i.imgur.com/tEusP11.jpg

结束语：
回到我已经提到的内容。使用

.page-id-7215

、

.elementor-element-a8f0323

和

.elementor-element-0ca608c

是次优的，因为这些名称可以更改，例如新安装等

Answer 2

你不能在浏览器中这样做。当从不同于网页的域加载 iFrame 时，JavaScript 对该 iFrame 的访问将被阻止。 CSS 也是。您可能可以摆弄 Content Security Policies

meta

标记在您的 HTML 中，但我对此表示怀疑。

但是你可以使用像 Nodejs 这样的服务器来做。使用 Node 的

http

模块并加载/获取所有这些小部件，然后使用

jsdom

获取您想要的部分并将它们全部组装到您的最终网页中。

您可以每天或每小时运行该节点脚本，以将自定义的 HTML（页面）保存在磁盘上并以静态方式提供。