Question

我想将Head Tag中的Style Tag中定义的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＆amp;来定义每个样式。 div.div2 > span，我想完全应用这些样式。有没有办法做到这一点？

类似于：div.div2 > p {}, span{}等...以便定义的所有样式都将应用于类div的{{1}}代码。

Answer 1

你可以这样做：

div.div2 > p, div.div2 span {
    ...
}

Answer 2

我建议你看看scss，它会改变这段代码

div.div2 > p {
  font-size:10pt;
  color:blue;
  background-color:green;
}

div.div2 > span {
  font-size:16pt;
  color:green;
  background-color:yellow;
}

到

div.div2 {
  p {
    font-size:10pt;
    color:blue;
    background-color:green;
  }

  span {
    font-size:16pt;
    color:green;
    background-color:yellow;
  }
}

它使嵌套分配更容易，您不必多次定义div.div2。它可以节省你的时间和时间。麻烦

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

2 个答案: