2009-07-31 111 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/
使用我希望你會發現有一些有益的工作人員

相關問題