我怎样才能使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的应用速度（这在移动设备上会更明显）。

问题是，除了以上这些，实际上很少有方法可以做你想做的事。

你可以使用作用域样式，这听起来是个好主意，直到你意识到Firefox是目前唯一支持它的浏览器（从外观上看，是在可预见的未来唯一支持它）。

你也可以尝试通过iframe包含你的HTML，在所述iframe中内联你想要的CSS，iframe内的CSS只应用于iframe，应用于页面的CSS不会影响iframe内部的任何内容。这基本上类似于上面描述的作用域样式解决方案，只是它具有完全的浏览器支持。

然而，Iframes可能会变得有点乱，给页面添加不必要的膨胀，维护起来有点麻烦。

我能想到的唯一另一个解决方案是在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;
}