有沒有辦法從一個樣式中應用CSS類？

我試圖在我的CSS樣式表中更模塊化，並想知道是否有一些功能，如包含或應用，允許作者動態地應用一組樣式。有沒有辦法從一個樣式中應用CSS類？

因爲我很難說這個問題，所以也許一個例子會更有意義。

比方說，例如，我有以下的CSS：

.red {color:#e00b0b} 
#footer a {font-size:0.8em} 
h2 {font-size:1.4em; font-weight:bold;}

在我的網頁，讓我們說，我想無論是頁腳鏈接和H2元素使用特殊的紅色（可能還有其他地方我也想使用它）。理想情況下，我想這樣做如下：

.red {color:#e00b0b} 
#footer a {font-size:0.8em; apply-class:".red";} 
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}

對我來說，這種感覺在某種程度上的「模塊化」，因爲我可以修改到.red類，而不必擔心它被用在這麼多，而其他位置可以使用該類中的樣式，而不必擔心它們具體是什麼。

我明白，我有以下選擇，並已列入爲什麼，在我相當經驗的意見，他們都低於完美：

的color屬性添加到每個元素我想成爲那種顏色。 不理想，因爲如果我改變顏色，我必須更新每個規則以匹配新顏色。
將red類添加到我想成爲紅色的每個元素。 不理想，因爲這意味着我的HTML是口述演示文稿。
創建一個附加規則，用於選擇每個我想要變爲紅色的元素並將color屬性應用於該屬性。 並不理想，因爲它是很難找到的所有規則，風格的特定元素，使得挑戰

也許我只是一屁股的維護越來越以下選項是唯一的選擇，我應該堅持下去。我想知道，但是，如果存在「理想」（好，我的理想）方法，並且如果存在，什麼是正確的語法？

如果它不存在，上面的選項3似乎是我最好的選擇。但是，我想獲得確認。

來源

2012-09-29 zashu

http://lesscss.org/ –

您可以通過點擊投票下方的正確標記接受正確的答案 –

簡答：在純CSS中沒有辦法做到這一點。

較長的回答：Sass通過@extend directive解決了這個問題。

.error { 
    border: 1px #f00; 
    background-color: #fdd; 
} 
.seriousError { 
    @extend .error; 
    border-width: 3px; 
}

這可以讓你保持你的CSS模塊化發展，但它確實需要一個預編譯步驟中，您使用它之前。它工作得很好，但。

來源

2012-09-29 04:16:29

這絕對是最接近我所希望的，正如一個評論指出的那樣，通過lesscss.org有一個客戶端選項，它看起來很相似（儘管它沒有@extend表示法）。我會給這個鏡頭，看看預編譯是否足夠不顯眼 – zashu

此外，如果這有助於其他人，你可以添加薩斯作爲[生成器]（http://stackoverflow.com/questions/8248567/如何在eclipse中配置eclipse-to-run-an-external-builder-or-shell-command），以便每當你保存一個.scss文件時，例如，如果將它編譯成與它相當的CSS。（右鍵單擊您的項目）>屬性>構建器>新建>程序在我的情況下，我選擇了scss批處理文件作爲我的應用程序，只有當scss目錄內的資源發生更改時才刷新，並將其設置爲在自動構建期間運行（即保存時） – zashu

首先，你不能做apply-class:".red";

執行這種類型的行動，我會建議你使用這個方法

.red {color:#e00b0b;} 
h2 {font-size:1.4em; font-weight:bold;} 
.mymargin{margin:5px;} 

<h2 class="red mymargin">This is h2</h2>

和DIV

<div id="div1" class="red mymargin"></div>

使用本如果您將在.red類別中更改，則它將隨時更改

來源

2012-09-29 03:47:47 StaticVariable

雖然這絕對是純粹的CSS/HTML視角的最佳答案，但我發現克里斯的更直接地解決了我希望能夠完成...即使它確實需要一個外部工具。 – zashu

您可以在JavaScript中使用DOM來動態編輯HTML標籤的id和/或class屬性。

來源

2012-09-29 03:49:12

我同意DarthCaesar和jhonraymos。要更新使用JavaScript類，所有你需要是一個簡單的：

function toggleColorClass(e){ 
    var redClass = document.getElementsByClassName('red'); 
    redClass.removeAttribute('class', 'red'); 
    /*Set the class to some other color class*/ 
    redClass.setAttribute('class', 'blue'); 
}

當然，要完成這項工作，你需要包括你的文檔中的上述功能的某處......如果這是所有JS你使用你可以堅持它的頭或甚至使用它內聯。您可能還想寫它，以便雙向切換，即打開和關閉紅色。此外，jhonray的代碼片段可能是您想要標記CSS的方式。

來源

2012-09-29 04:12:36

有沒有辦法從一個樣式中應用CSS類？

回答

相關問題