html - 如何防止样式应用于某些 HTML 片段？

Question

我正在为一些可重用的组件创建文档。文档页面将包含该组件的演示以及如何重新创建它的文档。例如，我可能正在演示这个 HTML：

<div class="top-level">
    <p>Hello</p>
</div>

哪个有这个CSS：

.top-level { background: red; }

现在，我想要一个记录如何创建重新创建它的旁白：

<aside>
    <p>All top level content goes into a div with a class of "top-level:</p>
    <code><div class="top-level"></div></code>
</aside>

问题是“代码”标签之间的文本仍在获取 div.top-level 的样式。我希望它简单地显示为代码。我确定我可以覆盖所有内容，但是有人知道更优雅的解决方案吗？

谢谢！

Answer 1

Any code to appear on a Web page should be placed inside a <code> element. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

But you must still escape your < and > (<,>), that the browser knows that you don't want the tags rendered out as html.

The correct expression between your <code> tags would be <div class="top-level"></div&gt.