我有一个带有样式的 css 文件：
button-text-only {
padding: .4em 1em;
}
.ui-buttonse {
margin-right: 7px;
}
.ui-datepicker {
left: 2px;
}
... and etc ...
如何才能使 css 样式实际上位于 id = "date_catr" 的容器内？
【问题讨论】：
我认为有几种方法可以解决这个问题，如前所述，您可以在规则前加上容器 ID，例如
#date_catr button-text-only {
padding: .4em 1em;
}
#date_catr .ui-buttonse {
margin-right: 7px;
}
#date_catr .ui-datepicker {
left: 2px;
}
etc.
不幸的是，如果您必须将此应用到 50-100 种样式，这会增加相当多的不需要的 CSS，并且可能会稍微降低应用 css 的速度（这在移动设备上会更加明显）。
问题是，除了上述之外，几乎没有什么方法可以真正做到你想要的。
你可以使用scoped styles，这听起来是个好主意，直到你意识到 Firefox 确实是唯一一个支持currently supports this 的浏览器（而且从外观上看，在可预见的未来是唯一支持它的浏览器）。
您还可以尝试通过 iframe 包含您的 HTML，将您的预期 CSS 内联在所述 iframe 内，iframe 内的 CSS 仅适用于 iframe 内，并且应用于页面的 css 不会影响 iframe 内的任何内容。这基本上类似于上面描述的范围样式解决方案，只是它具有完整的浏览器支持。
但是，iframe 可能会变得有点凌乱，给页面增加不必要的膨胀，并且维护起来有点麻烦。
我能想到的唯一其他解决方案是在 css 中添加前缀并在 css 中对其进行更改，这意味着 css 并没有真正变得更大，并且还确保应用 css 的速度不应该是效果，但是这可能会很混乱且维护起来很麻烦，我不确定您是否希望元素从您发布的类中继承基本样式......不管它看起来像这样：
.i-button-text-only {
padding: .4em 1em;
}
.i-ui-buttonse {
margin-right: 7px;
}
.i-ui-datepicker {
left: 2px;
}
etc.
就我个人而言，我会选择选项一，可能会选择一门课程，这样您以后就不必处理具体问题了。你最终会有点慢，但它应该很不明显（希望如此）
【讨论】：
使用#date_catr 为上面的每个规则添加前缀，如下所示：
#date_catr button-text-only {
padding: .4em 1em;
}
【讨论】：