javascript - 如何限制内联CSS的范围？

Question

我正在为列表中的每个元素渲染动态 CSS。每个元素的元素都有可能唯一的 CSS 规则，即

<div id="thing1" class="vegas">
  <style> 
  p {
    font-size: 14pt; // this stuff is generated dynamically and i have no control over it
    color: green;
  }
  </style>
  <p>
    I'm thing 1!
  </p>
</div>

<div id="thing2" class="vegas" >
  <style>
  p {
    font-size: 9pt; // so is this stuff
    color: red;
  }
  </style>
  <p>
    I'm thing 2!
  </p>
</div>

有没有一种方法可以将每个元素包装在通用 CSS 规则中，从而将每个元素关联的 CSS 范围限制为元素本身？喜欢

.vegas > * {
  whatever-happens-in-here: stays in here;
}

或者任何其他方法来处理谁知道什么类型的动态特定 CSS 范围？

Answer 1

级联样式表能够处理特定元素的子元素的样式，因此:

div#thing1 p {
    rule: value; // Only applies to p in div with id="thing1"
}

div#thing2 p {
    rule: value; // Only applies to p in div with id="thing2"
}