Question

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

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

我怎样才能在id =“date_catr”的容器内执行css样式？

Answer 1

使用#date_catr为上面的每条规则添加如下内容：

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

Answer 2

我认为有一些方法可以解决这个问题，正如已经说明的那样，您可以在规则前加上容器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，在iframe内部使用您想要的CSS内联，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.

就我个人而言，我会选择一个选项，也许选择一个班级，以便您不必在以后处理特殊性问题。你最终会有一点点缓慢，但它应该是非常不明显的（希望如此）

我怎么能这样做，css样式实际上在容器内？

2 个答案: