css - LESS css 类层次结构

Question

我有一个聊天联系人列表，其中每个联系人都可以具有由类表示的不同状态：

• 。在线的
• 。离线
• .online .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 类时，它只会更改背景颜色（从顶层开始）。

我错过了什么？谢谢！

Answer 1

当它被编译时，可能会发生一些最终改变顺序的事情（尽管它不应该）。首先，除了向我们展示您的 LESS 之外，您能否向我们展示您编译后的 CSS（Procssor非常适合在编译后进行美化），这应该让我们更好地了解浏览器看到的内容，您还可以向我们展示 HTML 吗？你的元素。

说了这么多简单的解决方案，尤其是当您希望选择始终占主导地位时，使用!important

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

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

Answer 2

如果您<p>使用 CSS 更改元素，则需要使 CSS 看起来像这样：

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

.online 类也是如此

如果您需要 2 个不同的状态，则添加额外的 CSS：

.selected {
    // basic code
}

.selected p {
    // extended code to p element
}