基于 URL 不同 CSS

Question

我必须使用相同名称的域，一个以 .nl 结尾，一个以 .be 结尾。例如 domain.nl 和 domain.be。它们遵循相同的一般样式，但我不希望某些元素根据 .nl 和 .be 具有不同的样式。如何在不加载额外 css 文件的情况下实现此目的？

Answer 1

如果您使用的是纯 Javascript，我建议为域创建不同的 CSS 文件；仅添加 2 个不同文件中的差异，一个用于 be，一个用于 nl.

somefilename_be.css

{
    body: 'green';
}

somefilename_nl.css

{
    body: 'red';
}

所有相同的样式都应该放在一个通用文件中，例如 common.css。

然后您可以根据域有条件地加载 CSS 文件。

if (window.location.host.split('.')[1] === "be")
    document.write('<link rel="stylesheet" href="somefilename_be.css" />');
else 
    document.write('<link rel="stylesheet" href="somefilename_nl.css" />');

使用 JS 框架（React、Angular、Vue、Next、Svelte）

if (window.location.host.split('.')[1] === "be")
    import('somefilename_be.css'));    
else 
    import('somefilename_nl.css'));

Answer 2

如果差异很小，您可以依赖根元素上的 class，由 JavaScript 控制。例如：

if (/\.be$/.test(window.location.host)) {
  document.documentElement.classList.add('variant-be');
}

.variant-text {
  background: yellow;
}

.variant-be .variant-text {
  background: lime;
}

<div class="variant-text">A text with two possible backgrounds</div>

基于 URL 不同 CSS

Different CSS based on URL

javascript

css

url