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类层次结构

回答

相关问题