Question

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

.online
.offline
.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

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

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

.online类

也是如此

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

.selected {
    // basic code
}

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

较少的css类层次结构

2 个答案: