Javascript 从两个不同的css文件在两个不同的元素上应用相同的css规则_Javascript_Html_Css

Javascript 从两个不同的css文件在两个不同的元素上应用相同的css规则

javascript html css

Javascript 从两个不同的css文件在两个不同的元素上应用相同的css规则,javascript,html,css,Javascript,Html,Css,我想知道是否可能做到以下几点我有两个外部css文件，我想使用，不能更改。对于某些类，它们都有相同的规则可以在某个html元素上使用其中一个，而在另一个html元素上使用另一个吗例如，假设我有这些外部css文件： light.css: .nice-color { color: white; } 我有两个html元素： <div class="nice-color"></div> ... <div class="nice-color"><

我想知道是否可能做到以下几点

我有两个外部css文件，我想使用，不能更改。对于某些类，它们都有相同的规则

可以在某个html元素上使用其中一个，而在另一个html元素上使用另一个吗

例如，假设我有这些外部css文件：

light.css:

.nice-color {
    color: white;
}

我有两个html元素：

<div class="nice-color"></div>
...
<div class="nice-color"></div>

...

我可以在第一个元素上应用light.css，在第二个元素上应用dark.css吗

我对分割html文件、使用Angular等想法持开放态度。

我想您正在寻找。它将允许您为HTML的不同部分包含不同的CSS

示例：


p{font-weight:bold}
这是大胆的
这是标准重量

就个人而言，我不认为这是一个很好的模式，但我相信有一些很好的使用案例，特别是如果你只能够在网站的特定部分插入HTML。

你有两种方法

只加载您需要的css。如果您使用的是黑暗主题，则仅加载该主题。反之亦然

在主体中添加一个类/id，以便可以轻松更改css 即

如果是这样的话，你要么加载一个文件，要么加载另一个文件。现在，如果您可以编辑CSS和HTML，并添加一个更具体的选择器，它将是不同的，那么您不能在同一个HTML文件中这样做。但您可以在下面查看此建议：

<div class="nice-color"></div>
...
<div class="nice-color"></div>

#dark .nice-color {
   color: white
}

#light .nice-color {
   color: black
}

<body id="dark">
   <p class="nice-color">Something here</p>
</body>

#dark {
   .nice-color {
        color: black;
    }
}