html - 来自 javascript 时的 css 样式问题

Question

我有一个应用程序，在消息被这样解析后会出现一些文本:

<div class='message'>
    <p ng-bind-html="main.parseMsg(msg)"></p>
</div>

我已经为 .message p {} 写了一些 css。

我的parseMsg 有时会返回类似这样的内容

<div class='something'><p>...</p>

我希望 something 类根本不从 .message p{} 继承 css 属性。

有什么解决办法吗？

Answer 1

有几种 CSS 方法可以修复您的层次结构(例如将类添加到您的绑定(bind) p 等)，但还有另一个问题:您不能在 p 中包含 p.

这个嵌套的 p 标记:

<div>
 <p>1<p>2</p></p>
</div>

实际上变成三个 p 作为 div 的直接子级，因为浏览器呈现它以使其成为有效标记:

<div>
  <p>1</p>
  <p>2</p>
  <p></p>
</div>

因此，为了更好地回答您的问题并解决您的“段落问题”，您需要更改 p ，它必然是一个允许包含多个 p< 的元素 的。在这里，我们将使用 div:

// Template:
<div class="message">
  <div ng-bind-html="main.parseMsg(msg)"></div>
</div>

// CSS:
.message > div { /* Your child container element */ }.