如何防止css样式或其选择器*应用于特定元素

Question

我正在为客户制作一个嵌入式小部件，以便他们可以在我们自己的网站上嵌入我的服务。 我有一个问题，如果客户在他们的网站上使用bootstrap v3.3.7（到目前为止只测试了这个版本），那么它的css样式之一：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

正在破坏我的应用调整。

我没有Bootstrap的小部件应用程序：

我的小部件应用程序与Bootstrap：

我尝试过很多东西，例如我应用内部和内联css样式来覆盖它但没有任何效果。

我试过了：

 #widgetParent {
                    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
                    line-height: normal;
                    -webkit-box-sizing: content-box;
                    -moz-box-sizing: content-box;
                    box-sizing: content-box;
                }

这里我应用了属性值＆＃34; content-box＆＃34;因为它解决了谷歌Chrome开发工具上的问题，但它在内联或内部css中工作。

我甚至尝试调整我的应用程序Bootstrap样式，它看起来会更好但不可能，因为显然不是每个人都使用Bootstrap所以我的应用程序对齐将在没有Bootstrap网站的情况下崩溃。

那么，有什么方法可以检测网站是否有Bootstrap，所以我可以根据它或任何方式给出样式以防止这个*选择器应用到我的widget应用程序？如果有人有任何解决方案，请告诉我。

注意： 我在bootstrap v3.3.7 CDN上测试了这个，它包含在应用程序中，如下所示：

  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

谢谢

Answer 1

我把它放在我的内部CSS中我的意思是html样式标记并解决了问题。

 #widgetParent div {
                    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; 
                    line-height: normal;
                    -webkit-box-sizing: content-box!important;
                    -moz-box-sizing: content-box!important;
                    box-sizing: content-box!important;

                }

感谢大家的帮助。