html - razor div 跳过 css::after

Question

这是我的 MVC 局部 View ，

  <p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
  </p> 

当它呈现 View 中的元素时，呈现在 p 标签之外，如下所示，

为什么突出显示的 div 会跳到 div 之外，知道吗？

Answer 1

问题其实起源于<p> tag 是一个 block 级元素，它启用“标签省略”，如果在匹配结束标签 </p> 之前找到下面提到的这些元素，它会自动省略结束标签并自行关闭。 :

• <address>
• <article>
• <aside>
• <blockquote>
• <div>
• <dl>
• <fieldset>
• <footer>
• <form>
• <h1>至 <h6>
• <header>
• <hr>
• <menu>
• <nav>
• <ol>
• <pre>
• <section>
• <table>
• <ul>
• 另一个<p>元素

因此，这意味着上面的那些 block 元素不能嵌套在<p> 中。元素。

与其使用段落标记嵌套上述其他元素，不如使用<div>。嵌套标签 <div>小号:

<div class="contain mutliOptions method" id="paymentOptions">                                       
    @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
</div> 

引用:

The HTML paragraph element (MDN)