html - 我怎样才能使 css 样式实际上在容器内？

Question

我有一个带有样式的css文件：

button-text-only {
    padding: .4em 1em;
}
.ui-buttonse {
    margin-right: 7px;
}
.ui-datepicker {
    left: 2px;
}
... and etc ...

我该怎么做才能使 css 样式实际上位于 id = "date_catr" 的容器内？

Answer 1

我认为有几种方法可以解决这个问题，如前所述，您可以在规则前加上容器 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 确实是目前唯一支持此功能的浏览器（从外观上看，在可预见的未来，唯一支持它的浏览器）。

您还可以尝试通过 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.

就我个人而言，我会选择一个选项，也许是一门课，这样你以后就不必处理具体问题了。你最终会有点慢，但它应该很不明显（希望如此）

Answer 2

使用 #date_catr 为上面的每个规则添加前缀，如下所示：

#date_catr button-text-only {
    padding: .4em 1em;
}