html - 将通用 CSS 样式仅应用于单个容器

我想将在 Head 标签内的 Style 标签中定义的 CSS 样式应用到特定的 div。示例 HTML

<html>
  <head>
    <style>
      p {
        font-size:10pt;
        color:blue;
        background-color:green;
      }
      span {
        font-size:16pt;
        color:green;
        background-color:yellow;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p style = "font-size:14pt;">Hello world</p>
      <p>How Are You</p>
      <span>How Are You Test span</span>
      <div>How Are You Test div </div>
    </div>

    <div class="div2">
      <p>This is div2</p>
      <p style = "font-size:14pt;">Hello world</p>
      <p>How Are You</p>
      <span>How Are You Test span</span>
      <div>How Are You Test div </div>
    </div>
  </body>
</html>

我只想将样式添加到 div2。我不想使用 div.div2 > p 和 div.div2 > span 定义每个样式，而是想完全应用这些样式。有什么办法吗？

类似于:div.div2 > p {}, span{} 等...以便所有定义的样式都将应用于具有类名的 div 标签div2.

最佳答案

你可以这样做: