Question

如果我有两个不同的css文件，每个文件包含相同css类的定义（例如.mainDiv {}）但是每个类都有不同的属性，我怎么能将它们应用到两个不同的div中我的HTML代码（比如ids myMainDiv1和myMainDiv2）？

我意识到这不再是div元素id和css classe名称之间的关联，但我想知道是否有可能以某种方式解析/读取每个css文件 - 通过JavaScript - 并为我的每一个动态应用规则的div。

所以我绝不想对css文件进行更改;我可以拥有所需数量，但它们都需要具有完全相同的类名（例如mainDiv）;通过JavaScript - 如果可能 - 我可以为每个div应用样式。

Answer 1

尝试使用javascript解析你的CSS并不是一个好主意，而只是使用CSS作为它非常擅长的选择器。

最佳选择是为每个文件中的每个规则添加前缀。因此，如果您有light-theme.css和dark-theme.css，那么light-theme.css中的每条规则都会以.light-theme开头（同样适用于dark-theme.css - ＆gt; {{ 1}}）。

相应地为每个规则添加前缀后，您可以包含这两个文件，只需根据要生效的CSS文件添加一个类。

.dark-theme

/* Shared styles */
#content {
  height: 400px;
  width: 400px;
}
#content > div {
  width: 200px;
  float: left;
}
ul {
  list-style: square inside;
}
li {
  height: 40px;
}



/* light-theme.css */
.light-theme li {
  color: #339;
  background-color: #fff;
}



/* dark-theme.css */
.dark-theme li {
  color: #ccf;
  background-color: #333;
}

Answer 2

您必须使用更具体的选择器覆盖不正确的样式。

#myMainDiv1.mainDiv { ... }
#myMainDiv2.mainDiv { ... }

Answer 3

您可以为元素提供多个类。如果您使用的是mainDiv类

<div class="mainDiv firstMainDiv"></div>
<div class="mainDiv secondMainDiv"></div>

现在，使用类名.mainDiv给出的样式将适用于两者。但是如果你想专门为第一个div提供一些样式，那么你可以使用这两个类

.mainDiv.firstMainDiv {}

此样式仅适用于第一个div。

从两个不同元素上的两个不同文件加载并应用相同的css类

3 个答案: