Question

我可以将一个HTML5元素的CSS规则应用于另一个HTML5元素而无需编辑核心文件和重复规则吗？如果可以的话我该怎么办？

这是我遇到的问题的简化版本：

core.style.css的内容：

abbr {
    color: #ff8c00;
}
span {
    color: #e9967a;
}

extension1.style.css的内容：

abbr {
    /* applying style rules of span of core.style.css */
    color: #e9967a; 
}

如您所见，我希望abbr的{{1}}与extension1.style.css的{{1}}具有相同的规则。如果某人更新了span的{{1}}，则core.style.css的{{1}}也应该更新。

修改
JavaScript不是一种选择。

Answer 1

这在纯CSS中是不可能的。您应该研究CSS预处理器，如Sass或Less，以便在CSS中使用类似变量的东西。

Answer 2

为什么你没有core.style.css拥有核心css，而不是复制新的风格：

abbr {
    color: #e9967a;
}
span {
    color: #e9967a;
}

并且extension1.style.css有样式可以覆盖你想要的核心：

abbr {
    color: #ff8c00;
}

然后在加载核心CSS后，只需在abbr上想要不同颜色的页面上加载CSS：

<link rel="stylesheet" type="style/css" href="core.style.css" />
<link rel="stylesheet" type="style/css" href="extension1.style.css" />

或者，有一种方法可以使用PHP，在您的情况下可以使用任何类型的数据持有者。

<强> HTML：

<link rel="stylesheet" type="style/css" href="core.style.php" />
<link rel="stylesheet" type="style/css" href="extension1.style.php" />

CSS： core.style.php

<?php 
header("Content-type: text/css; charset: UTF-8");
$color = // color variable obtained from data holder
?>

span {
    color: <?=$color;?>;
}

abbr {
    color: #e9967a;
}

CSS： extension1.style.php

<?php 
header("Content-type: text/css; charset: UTF-8");
$color = // color variable obtained from data holder
?>

abbr {
    color: <?=$color;?>;
}

我可以将一个HTML5元素的CSS规则应用于另一个HTML5元素而无需编辑核心文件和重复规则吗？

2 个答案: