html - 如何防止 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;
                }

我在这里应用了属性值“content-box”，因为它解决了 Google Chrome Dev Tool 上的问题，但它在内联或内部 css 中工作。

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

那么，有没有什么方法可以检测网站是否有 Bootstrap，以便我可以根据它提供样式，或者有什么方法可以防止这个 * 选择器应用于我的小部件应用程序？如果有人对此有任何解决方案，请告诉我。

注意: 我已经在应用程序中包含的 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;

                }

感谢大家的帮助。