时间戳

首页 > 解决方案 > 如何在某个标签后应用 CSS 规则

javascript - 如何在某个标签后应用 CSS 规则

问题描述

正如标题所述，我有以下 HTML，如下所示：

<div id="content">
  <main>
    <h2 > Example Title</h2>
    <p>Hello World</p>

    <table class="table table-striped table-responsive-md btn-table">
      <tr>
        <td>Example 1 </td>
        <td>Example 2</td>
      </tr>
    </table>    
  </main>
</div>

在<h2>示例标题之后，我想将 CSS 规则：margin-top:20px;, margin-bottom:20px, 应用于所有其他标签，即<p>, <table>。

我该怎么做？

标签： javascripthtmlcss

解决方案

您可以创建一个类并将其添加到 h2 之后的所有元素中。例如：

.example{
   margin-top: 20px;
   margin-botton:20px;
}

或者

您可以为所有元素提供 margin-top: 20px 和 margin-botton:20px 并通过给它一个 id 来排除 h2。例如：

#example{
   margin: 0;
}

推荐阅读