将css从一个类复制到另一个类？答案

【问题标题】：copy css from one class to another?将css从一个类复制到另一个类？
【发布时间】：2010-11-15 17:45:14
【问题描述】：

这似乎是一个非常基本的问题，但我似乎没有找到答案。我知道可以一次为多个元素定义一个 css 规则：

.element1, .element2{
  font-size:14px;
}

是否有可能做同样的事情，但在定义 element1 的 css 之后将 css 应用于元素？像这样的：

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

所以现在 element2 继承了元素 1 的 css。我尝试这样做的原因是因为我有一个为站点的所有页面加载的 element1 的 css 定义。然后，对于一个特定页面（加载主 css 文件以及它自己的文件），我想使用 element1 中的样式并添加到它。我要避免的是为网站上的所有页面加载 element2 的定义（包括那些甚至没有元素 [s] 的类 element2。

可以这样做吗？我意识到我可以使用 jQuery（即$(".element2").addClass(".element1");）轻松实现这一点，但我想避免在我的 css 中使用脚本。

谢谢！

【问题讨论】：

标签： jquery css web stylesheet

【解决方案1】：

你可以使用：

<div class="element1 element2">

虽然有

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

所以这两个类都适用。 jQuery 足够聪明，可以像这样添加类和删除类。

您还可以使用更高级的东西，例如允许混合的SASS。

【讨论】：

不错！我从来不知道有像 SASS 这样的东西存在。非常酷，虽然我可能不会使用这是我的项目。尽管我熟悉您概述的第一种方法，但它确实给了我一个想法。非常感谢！
他说了什么。如果您希望您的“.element2”对象具有“.element1”对象的样式，只需给它们类“.element1”。

【解决方案2】：

据我所知，不，仅靠 CSS 是不可能的。您已经确定了一种实现目标的方法，我不得不建议这是更好的方法。

在 CSS 中，一个类只能从其父类继承，并且只有在 <example-attribute>: inherit; （我已将其与 color:、background-color:、font-family:、font-size: 等一起使用时，但我警告你如果父级的font-size 的大小被描述为增加或减少，那么子级的font-size 也会发生变化。

【讨论】：

【解决方案3】：

CSS 确实需要这个功能。在元素级别指定多个类很好，但不等于可以去：

.my_class { 类：my_global_class; }

能够让一个类使用另一个类的样式，将是非常强大的。它将继承模型的这一部分移到它所属的 CSS 中，从而减少混乱的标记。

我现在在一个网站上工作，我们有很多不同的字体组合。一些 h 和 p 标签看起来不同，具体取决于它们的页面和上下文。必须让我们的字体系列的字体列表必须存在于我们需要它们的每个类中，这真的很痛苦。我希望能够做到这一点：

/* 默认为 p 标签 */ p { font-family:Times, Arial, Helvetica; } /* 异常 */ .arial {font-family:Arial, Times, Helvetica; } .segoe {font-family:Segoe, Arial, Helvetica; } .my-page1 p {class:arial;} .my-page2 p {class:segoe;}

在上面，我的字体列表将存在于一个中心位置，我可以将它们应用到任何我想要的地方，纯粹是在 CSS 文件中。如果我的网站中有 100 个 p 标签，那么我必须为每个例外添加一个“类”，这可能会很痛苦。当您有多个开发人员在一个网站上工作时尤其如此。

【讨论】：

【解决方案4】：

根据您的描述，您希望 .element1 在多个页面上可用和使用，但在一些特殊页面上，您希望实现 .element1 类的元素看起来不同，在您的示例中为粗体。

您得到的答案绝对是一种方法，而且肯定会奏效。您可以做的其他事情是在特殊页面上包含额外的 CSS。

例如，您可以拥有一个包含在所有页面中并包含 CSS 的 allpages.css：

.element1 {
    font-size: 14px;
}

然后您可以有一个名为 exceptions.css 的单独 CSS 文件，其中包含：

.element1 {
    font-weight: bold;
}

这是因为当为同一个选择器定义多个规则时，这些规则会合并在一起。使用这种技术，您不必修改 HTML 元素的类值。

【讨论】：

【解决方案5】：

类似于http://lesscss.org/中使用的语法
我希望你能在那里找到一些有用的员工

【讨论】：