如何从另一个CSS规则借用样式

Question

主要文件：

home.html（访问权限：只读）

...

    <h1>Heading 1</h1>

...

externalFile.css（访问：只读）

.tagh1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

myfile.css（access：read / write）

h1 {
  color: #08C;
}

如何在.tagh1 CSS规则（myfile.css）中包含h1（externalFile.css）的样式，而不将它们从一个文件复制并粘贴到另一个文件中？

逻辑回答：

h1 {
  color: #08C;
  /* Just copy and paste them */
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

但我不能这样做：）

修改

我认为可能是这样的：

.tag1 {
  property1: value1;
  property2: value2;
}

.tag2 {
  include(.tag1); /* or something */
  property3: value3;
}

避免重复代码。

Answer 1

如果我正确理解了这个问题，那么你已经在页面中包含了两个CSS文件，并且想要在没有必要CSS类的H1标签上重用第一个CSS规则。并且它不是编辑HTML文件或第一个CSS文件的选项。

CSS本身并不提供您正在寻找的重复使用类型。像LESS或SASS这样的动态样式表语言可能，但考虑到您网站的限制（只读文件），这可能不是一种选择。

如果JavaScript或jQuery是一个选项，您可以动态地将.tagh1类添加到h1元素，而无需触及HTML源代码。

<强>的jQuery

$(document).ready(function(){
    $('h1').addClass('tagh1');
});

然后，上述两个CSS规则都将应用于H1元素。

您是否有可以写入权限的.js文件？如果是这样，请在那里添加上面的代码。如果没有，您将必须将CSS样式复制并粘贴到第二个CSS文件中。