如何仅覆盖页面上一个区域的 CSS Box Sizing？答案

【问题标题】：How to override CSS Box Sizing for just one area on page?如何仅覆盖页面上一个区域的 CSS Box Sizing？
【发布时间】：2014-08-22 02:03:03
【问题描述】：

我的 Twitter Bootstrap 文件中有以下 CSS：

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这导致我的 TinyMCE 编辑器出现问题，主要是调整文本区域的大小。无论如何，如果我删除上面的代码一切都很好，但显然我需要它，否则 Bootstrap 的其余部分会中断。

那么，如何仅针对 TinyMCE 覆盖上述内容？我试过这个：

.tinymce-editor,
.tinymce-editor:before,
.tinymce-editor:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

但没有运气。 .tinymce-editor 恰好是我的编辑器所在的 div。

【问题讨论】：

我只是建议.tinymce-editor *.. 不过你可能不需要!important。
尝试通过添加另一个级别的选择器来避免使用!important，即.parent .tinymce-editor *,
@TK123 你可以回答你自己的问题。不要将答案添加到问题中，而是将其添加为答案。
正如@hitautodestruct 所说，您需要将答案发布为答案，而不是编辑。

标签： html css twitter-bootstrap

【解决方案1】：

没关系，刚刚得到它：

.tinymce-editor *,
.tinymce-editor *:before,
.tinymce-editor *:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

【讨论】：

仅供参考，当页面上有许多 DOM 元素时，或者在 .tinymce-editor 类下，* 选择器会对性能产生严重影响。
实际上省略了 *.我无法在使用 * 的情况下完成这项工作。我的问题是引导程序踩到 datatables.net。
* 完成了工作，我只添加了类名，但它不起作用，.calss 名称和 * 完成了.. 谢谢好友。