2009-07-31 110 views
4

这可能看起来像一个非常基本的问题,但我似乎没有找到答案。 我知道这是可能为这样一次定义多个元素的CSS规则:将css从一个类复制到另一个类?

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

是否有可能,不过,这样做同样的事情,但CSS后的CSS应用到元素for element1已被定义?类似这样的:

.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

感谢

回答

8

您可以使用:

<div class="element1 element2"> 
同时具有0
.element1{ 
    font-size:14px; 
} 

.element2{ 
    font-weight:bold; 
} 

所以这两个类都适用。 jQuery足够聪明,可以添加类并删除类。

此外,你可以使用更高级的东西,如SASS,允许mixins。

+0

不错!我从来不知道像SASS这样的东西存在。令人惊讶的酷,但我可能不会使用这是我的项目。虽然我熟悉你概述的第一种方法,但它确实给了我一个想法。非常感谢! – 2009-07-31 09:36:20

+0

他说什么。如果你想让你的“.element2”对象具有“.element1”对象的样式,只需给它们类“.element1”。 – Alsciende 2009-07-31 10:04:37

1

据我所知,不,这不可能单独使用CSS。你已经确定了实现你的目标的一种方法,我不得不建议这是更好的方法。

在CSS中一个类只能继承其父,而且只有<example-attribute>: inherit;(我用这个与color:background-color:font-family:font-size:等等,不过我警告你,如果父大小的font-size 。描述为增加或减少时,font-size将在孩子的变化,也

0

CSS真的需要这个功能在单元级指定多个类是伟大的,但不一样的是能够去:

 
.my_class { class:my_global_class; } 

能够让班级使用另一个班级的班级,这将是非常有力的。它会将继承模型的这一部分移动到它所属的CSS中,从而减少混乱的标记。

我正在网站上工作,我们有很多不同的字体组合。一些h和p标签根据其页面和上下文而有所不同。真正的痛苦是必须让我们的字体列表必须存在于我们需要它们的每个类中。我很想能够做到这一点:

 
/* 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标签,那么我必须为它们中的每一个添加一个“类”来处理这些异常,这可能会很痛苦。当你有多个开发人员在一个站点上工作时,情况尤其如此。

0

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

你给的答案绝对是一种方法,一定会奏效。您可以做的其他事情是在特殊页面上添加额外的CSS。

例如,你可以有一个allpages.css是包括所有页面,包含CSS:

.element1 { 
    font-size: 14px; 
} 

然后你就可以有一个名为exceptions.css一个单独的CSS文件,其中包含:

.element1 { 
    font-weight: bold; 
} 

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

0

语法一样,在http://lesscss.org/
使用我希望你会发现有一些有益的工作人员

相关问题