假设我有两个不同的 css 文件,每个文件都包含相同 css 类的定义(例如 .mainDiv {}
),但每个类都有不同的属性,我将如何应用它们到我的 HTML 代码中的两个不同的 div(比如 IDs myMainDiv1
和 myMainDiv2
)?
我意识到这不再是 div 元素 ID 和 css 类名称之间的关联,但我想知道是否有可能以某种方式解析/读取每个 css 文件 - 通过 JavaScript - 并为我的每个文件动态应用规则分区。
所以我绝对不想更改 css 文件;我可以根据需要拥有多个,但它们都需要具有完全相同的类名(例如 mainDiv
);通过 JavaScript - 如果可能 - 我可以为我的每个 div 应用样式。
最佳答案
尝试使用 javascript 解析 CSS 确实不是一个好主意,而只是将 CSS 用于它非常擅长的选择器。
最好的选择是在每个文件中为每个规则添加前缀。因此,如果您有 light-theme.css
和 dark-theme.css
那么 light-theme.css
中的每条规则都将以类似.light-theme
(同样适用于 dark-theme.css
-> .dark-theme
)。
一旦为每个规则添加了相应的前缀,您就可以包含这两个文件,并且只需添加一个基于您希望生效的 CSS 文件的类即可。
/* 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;
}
<div id="content">
<div class="light-theme">
<h2>Light</h2>
<ul>
<li>Red</li>
<li>White</li>
<li>Blue</li>
</ul>
</div>
<div class="dark-theme">
<h2>Dark</h2>
<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
</div>
</div>
关于javascript - 从两个不同的文件加载并应用相同的 css 类到两个不同的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33900446/