Question

是否可以为特定的html元素组禁用css样式？

更具体地说，我有html文档和许多css样式，我想为某些元素设置默认css（或删除/禁用这些元素的所有样式）。

有没有办法用html / css / javascript做到这一点？将所有样式逐个设置为默认值需要时间。

另外我可以说可以通过将部分代码嵌套到iframe来完成（因为它不会继承样式），但它根本不是很好用。

感谢您的帮助。

Answer 1

将一个类添加到<body>代码？

<强> HTML

<body class="default-theme">
  <p> ... </p>
  <ul>
    <li> .. </li>
  <ul>
</body>

<强> CSS

body.default-theme p {
   ... default settings ...
}

body.default-theme li {
  .. more css ...
}

Answer 2

元素如何分组？是特定的班级名称吗？如果是这样，您可以执行以下操作以清除样式或将其设置为特定值

var all = document.getElementsByTagName('theClass');
for (var index in all) {
  var element = all[index];
  element.style = {};
}

Answer 3

如果你控制样式表，那么你可以让所有样式都依赖于body元素中的master类。然后，您可以通过在body元素中添加或删除该类来打开/关闭所有这些规则。

假设班级名称是“主”。当“master”类名在body元素上时，如下所示：

<body class="master">

然后所有这些规则都将生效：

.master .selected {color: blue;}
.master #breadcrumb {color: red;}

如果您随后使用脚本从body标签中删除“master”类，则所有这些规则将立即停止应用。

显然，您不必使用body标签。您可以使用所有受影响元素的任何公共父对象。