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

Question

主要文件:

home.html(访问:只读)

...

    <h1>Heading 1</h1>

...

externalFile.css(访问:只读)

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

myfile.css(访问:读/写)

h1 {
  color: #08C;
}

我如何在 h1 CSS 规则 (myfile.css) 中包含 .tagh1 (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 文件中。