LESS CSS類層次結構

我有聊天接觸，其中每個聯繫人可以通過類表達了不同的狀態的列表：LESS CSS類層次結構

。網上
.offline
。網上.selected
.offline .selected

這些是相關樣式（例如）：

.online { 
    background-color: #fff; 
    p { color: #000; } 
} 

.selected { 
    background-color: #000; 
    p { color: #fff; } // This doesn't take effect 
}

Stylewise我總是希望應用於.selected的樣式占主導地位，但不幸的是，當我添加.selected類時，它只會改變背景色（從頂層開始）。

我錯過了什麼？謝謝！

來源

2012-04-10 johnny

請加[的jsfiddle（http://jsfiddle.net/）。 – Alp 2012-04-10 00:52:42

jsfiddle不支持LESS css不幸的是：/ – johnny 2012-04-10 12:56:49

如果你不能做一個小提琴，你至少有一個網站頁面，我們可以看看？這應該是一個簡單的解決方案，但我認爲我們在這裏丟失了一些關鍵信息 – 2012-04-10 22:55:41

它有可能在編譯時發生了一些事情，最終改變順序（儘管它不應該）。首先要做的事情，以及向我們展示你的LESS，你能告訴我們你編譯的CSS（Procssor編譯後非常適合），這應該讓我們更好地瞭解瀏覽器所看到的內容，你是否也可以向我們展示HTML你的元素。

說了這麼簡單的解決方案，尤其是當你要選擇的永遠是占主導地位的是使用!important

.online { 
    background-color: #fff; 
    p { color: #000; } 
} 

.selected { 
    background-color: #000!important; 
    p { color: #fff!important; } 
}

來源

2012-04-11 15:33:35 Chao

-2

如果你與你需要的CSS看起來像這樣的CSS改變<p>元素：

.selected p { 
    background-color: #0000; 
    color: #fff; 
}

也是一樣的。網上類

如果需要2個不同的國家，然後添加額外的CSS：

來源

2012-04-10 02:29:58

我正在使用LESS css作爲預處理器。即使我將它改爲.selected p也沒有任何反應。：/ LESS是否影響聲明的順序？ – johnny 2012-04-10 12:56:27

LESS CSS類層次結構

回答

相關問題