Question

这似乎是一个非常基本的问题，但我似乎没有找到答案。我知道可以一次为多个元素定义一个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现在继承了元素一的css。我尝试这样做的原因是因为我有一个为网站的所有页面加载的element1的css定义。然后，对于一个特定的页面（加载主css文件，以及它自己的），我想使用element1中的样式并添加到它。我要避免的是为网站上的所有页面加载element2的定义（包括那些甚至没有元素[s]和类element2的人。

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

谢谢！

Answer 1

您可以使用：

<div class="element1 element2">

有

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

因此两个类都适用。 jQuery非常聪明，可以添加类并删除这样的类。

此外，你可以使用像SASS更高级的东西，它们可以混合使用。

Answer 2

据我所知，不，仅凭CSS就无法做到这一点。你已经确定了实现目标的一种方法，我不得不建议这是更好的方法。

在CSS中，一个类只能从其父级继承，然后才能继承<example-attribute>: inherit;（我已经将其用于color:，background-color:，font-family:，{{ 1}}虽然我警告你，如果父母的font-size:大小被描述为增加或减少，font-size也会在孩子身上发生变化。

Answer 3

CSS确实需要此功能。在元素级别指定多个类很好，但与能够去的不一样：

.my_class { class:my_global_class; }

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

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

/* defualt for p tags */
p { font-family:Times, Arial, Helvetica; }

/* exceptions */
.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标签，那么我必须为每个标签添加一个“类”来处理这些异常，这可能会很麻烦。当您有多个开发人员在一个站点上工作时，尤其如此。

Answer 4

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

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

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

.element1 {
    font-size: 14px;
}

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

.element1 {
    font-weight: bold;
}

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

Answer 5

http://lesscss.org/中使用的语法我希望你能找到一些有用的工作人员

将CSS从一个类复制到另一个类？

5 个答案: