css - 在css中替换*？

Question

我在我的项目中使用了一个插件，它的 css 文件中需要以下代码：

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

问题是这搞砸了我的整个网站，有没有办法用更有针对性的东西来代替它？

谢谢

Answer 1

我在我的项目中使用插件

将插件标记包装在容器元素中，例如 saydiv并分配一个类 say

<div class="my_plugin">
  <!--Plugin Markup goes here-->
</div>

现在只需使用下面的选择器专门针对元素

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

上面的选择器将简单地选择嵌套在里面的所有元素.my_plugin

演示

Answer 2

更改*为特定元素。例如，

html, body {
}

或使用覆盖它

class (dot) or 
id selectors (#).

Answer 3

*针对每一个元素。要绕过它，请使用您要定位的元素的类或 div，如下所示：

 .my-div,
 .my-div:after,
 .my-div::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }