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

【问题标题】：How to borrow styles from another CSS rule如何从另一个 CSS 规则中借用样式
【发布时间】：2013-03-03 15:01:21
【问题描述】：

主要文件：

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;
}

为了避免重复代码。

【问题讨论】：

标签： html css

【解决方案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 文件中。

【讨论】：