Javascript 如何限制内联CSS的范围？

我正在为列表中的每个项目呈现动态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

层叠式样式表能够处理特定元素的子样式，因此：

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"
}

---

您需要了解浏览器的全局样式。例如，查找以下列表：

• 字体系列

• 行高

• 文本对齐

上面的默认值为

inherit

，这意味着无论发生什么情况，它们都从其父级获取属性值。因此，如果您更改了家长的属性，您的孩子也会更改

还有其他属性，如：

• margin

• padding

• border

• 宽度

• 高度

---

这些不会更改，也不会从父级继承。所以，如果你想做你想做的事情，你需要给你的后代，或者直系子代，而不是继承或者重置子代的样式。

为什么不使用内联样式属性呢

<p style="color:red;align:center"> Hello </p>

你好

上述CSS样式将仅应用于该特定段落标记。 您也可以对其他标记和HTML元素使用内联样式语句

---

或者，您可以包含一个外部通用样式表，并在需要变体的地方使用内联语句。CSS应用它遇到的最新样式描述。因此，内联语句将超越常见的CSS样式表效果。

我想您正在寻找

！重要信息

我无法编辑或修改即将出现的动态CSS，因此我认为我无法使用

！重要信息

，还是？您是说要忽略此“vegas”类之外任何css属性集的继承？

<p style="color:red;align:center"> Hello </p>