你能让HTML的一部分只受一个样式表的影响吗？

Question

我有一个链接到网站每个页面的样式表，另一个覆盖了第一个页面。我想要做的是在页面加载后使用jQuery（包含在一个div标签中）添加内容，但我只希望它受第一个样式表的影响，而其余的则受到两者的影响。顺便说一句，第二个样式表是动态的，它可能会或可能不会影响我添加的内容，但我想确保它没有。

我是否可以通过HTML5或JavaScript / jQuery实现此目的？

感谢。

Answer 1

我建议你修复覆盖其他人的CSS属性，但是你可以使用像你所说的页面部分那样的包装div，并在第一个CSS文档中为那个部分编写CSS，例如。

<div id="wrapper">


   ...


</div>


#wrapper a {
  ...
}
#wrapper b {
  ...
}
#wrapper p {
  ...
}

Answer 2

只需制作更多适合特定类的CSS规则。

Answer 3

通过使用容器的标识符

使样式表仅影响所需的部分

<div class="my_section">

  <!-- your loaded content -->

</div>

CSS

.my_section label{}
.my_section input{}
/* etc */

但是如果您发现某些元素仍然受到其他css规则的影响（或者您只是想确定），那么请使用!important decalaration

.my_section label{ width : 100px !important; }
.my_section input{ border: 1px solid lightgray !important; }

此外，如果您发现某些元素仍然受到影响，即使您使用！important技术而不是将css属性添加到样式属性

<label style="width : 100px !important;">...</label>

这样您就可以防止新加载的元素受到其他css规则的影响。