如何仅在特定框架中显示 html 内容？

Posted 2023-03-22

【中文标题】如何仅在特定框架中显示 html 内容？

【英文标题】：How to display html content in particular frame only?

【发布时间】：2019-11-30 03:02:47

【问题描述】：

我在后端使用summer-note 编辑器并将该html 内容存储在数据库中，并且我已在<div></div> 标记之间加载该HTML 内容。

当该页面加载到前端站点时，所有上传的 CSS 都适用于整个页面，例如

我在编辑器中编写了这段代码

h5 
  text-align; right;

这将应用于该页面的另一个 <h5> 标记。

那么，我只想在特定的 div 中应用该编辑器 css 的解决方案是什么？请指导我。

我只想在框架中显示该 HTML。

【参考方案1】：

您需要为该 DIV 分配一个类或 ID，然后使用 CSS 选择器，您只能设置您想要的部分的样式

然后您可以使用 .和 ID 通过声明 # 见下文：

<div class="this-is-a-class"></div> <div id="this-is-an-id"></div>

.this-is-a-class
text-align:center;

#this-is-an-id
text-align:center;

【参考方案2】：

给div 一个类名并在该类中定位h5。例如。

<style>
.text h5 
    text-align: right;

</style>

<div class="text">
    <h5>Some text</h5>
</div>

现在，通过这样做，h5 样式将只应用于您想要的特定样式。

【参考方案3】：

h5 .class_Name 
  text-align; right;

然后将该类赋予您想要的 div。 如果您还有其他疑问，请在评论中添加。 谢谢

【讨论】：

this text-align: right是从后端summer-note编辑器添加的，html数据存储在数据库中，这个编辑器h5标签css应用于所有h5标签

是否可以在数据库中存储的html中创建className？

【参考方案4】：

如果您只想设置一个标签的样式，那么您应该为该标签指定 id，如果您想设置多个标签但不是全部，那么您应该为这些标签指定样式。

HTML:-

<h5 id="idOfh5"> Hello H5 </h5>

CSS:- h5#idOfh5text-align: right;

和

HTML:-

<h5 class="classOfh5"> Hello H5 </h5>

CSS:- h5.classOfh5text-align: right;