Question

我知道有很多关于CSS继承的问题，但我所看到的都不是我的情况。

我正在构建一个小部件，它将由我无法控制的网站使用。

其中一些网站有可怕的CSS规则，例如：

*{
 color:green;
 font-size:20px;
}

如您所见，这将应用于我的所有小部件元素。

<div class="mywidget">
 Hello <b>World</b>
 <span>Lorem Ipsum</span>
</div>

<style>
.mywidget{
 color:brown;
 font-size:15px;
}

.mywidget span{
 font-size:18px;
 font-weight:bold;
}
</style>

即使我尝试将css重新应用于mywidget，<b>和span代码也不会因为先前的* css规则而改变，Ofcourse解决方案是为每个我不喜欢的标签制定大量的CSS规则。

欢迎任何CSS或Javascript解决方案

Answer 1

您可以自行使用自己的游戏来*重置所有inheritable properties：

.mywidget * {
    color: inherit;
    *color: #000; /*include this line only if you need IE7 support */
    font-size: 100%
}

之后，像往常一样为.mywidget及其中的元素添加所有CSS。

Answer 2

试试这个：

.mywidget, .mywidget *{
 color:brown;
 font-size:15px;
}

Answer 3

我想这里有几种解决方案，最直接的方法是添加！属性，这将覆盖默认样式，例如

font-size:15px !important;

阻止CSS *继承特定元素及其子元素

3 个答案: