Html 嵌套CSS类–要覆盖父类的子类？

目标是让元素的父元素指定其样式。所以.dark.light p会有浅文本，.dark p会有深文本，.light.dark.light p会有浅文本

p元素甚至可能不是.dark或.light的直接子元素，因此.light.dark div.wrap div.inner p将具有黑色文本

由于CSS的级联特性，它似乎更喜欢最后一条规则。这可能吗

/*不起作用-切换顺序没有帮助 当相反的问题发生时*/ .黑p{ 颜色：000； } .轻{ 颜色：aaa； } /*可以，但在我的用例中，我需要指定 特定元素*/ /* .黑暗{ 颜色：000； } .光{ 颜色：aaa； } */ /*如果段落嵌套得更深，则可以工作，但不现实*/ /* .dark>p{ 颜色：000； } .light>p{ 颜色：aaa； } */ /*仅适用于前两个级别*/ /* .黑p{ 颜色：000； } .轻{ 颜色：aaa； } .暗{ 颜色：aaa； } .浅色{ 颜色：000； } */ 轻文本

暗文

轻文本

暗文

轻文本

暗文

---

考虑为所有文本元素指定相同的颜色

然后覆盖亮或暗的颜色

身体{ 颜色：红色； } .light>p{ 颜色：蓝色； } 轻文本

暗文

轻文本

暗文

轻文本

暗文

---

CSS遵循CSS文档的流程，因此，如果在CSS文件中.light之后是.dark，则html中包含这两个类的任何元素都将始终显示.dark样式

.光{ 背景：ccc； } .黑暗{ 背景：999； }

---

这将是暗的，因为它位于css文件中的light之后。

下面的代码将覆盖代码的嵌套性质

.dark p {
    color: #000;
}
.light p {
    color: #aaa;
}

.dark .light>p{
    color:#aaa;
}
.light .dark>p{
    color: #000;
}

试试这个：

.dark > p {
            color:#000;
         }


.light > p {
            color:#aaa;
         }

完整代码：

.dark>p{ 颜色：000； } .light>p{ 颜色：aaa； } 轻文本

暗文

轻文本

暗文

轻文本

暗文

---

我通过稍微不同地设置HTML来解决这个问题。这为两个级别提供了足够的灵活性

.light{颜色：黑色；背景：浅灰色；} .深色{颜色：灰色；背景：黑色；} div.light{颜色：黑色} Lighttext

暗文

---

我不知道你想在这里做什么？班级和学校！重要的标记比许多不同的规则更可取。部分解决方案：nicetryvals。我知道我可以做到这一点，但在五到六个级别之后，它将变得非常难以管理，尤其是在大型项目中。它还可以覆盖如下内容：hover@scoopzilla！重要是最后的手段，避免它就像瘟疫一样。这在这里也没用，不是吗？我不认为这是一个CSS问题，而是一个HTML问题。标记混乱且组织不良。如果使用更好的结构化标记，则不会存在此问题。您可以使用p.light和p.dark并消除所有冗余分区。如果删除>，问题仍然存在。嵌套级别可能会有所不同。这将用于根据组件显示的背景色对组件进行主题化反应。例如，如果文本区域出现在浅色背景上，我想给它一个深色背景，如果它出现在深色背景上，我想给它一个浅色背景。那么也许你应该更多地关注特定性，而不是层叠。由于颜色属性是可继承的，因此依赖级联可能会很棘手。给目标元素一个更高的特异性。也许颜色是一个不好的例子。我主要在开发的应用程序中更改背景颜色和边框颜色。我总是可以在元素本身中添加一个类，比如黑暗背景或光明背景，但这其中的乐趣何在？如前所述，仅使用！作为最后手段很重要。在.light和.dark中有许多不同的组件，我想设计它们的样式。我更愿意简单地向它的父对象添加一个类，该类可以更改其子对象的背景颜色和样式，使其在该背景颜色上看起来很好，而不是将类应用于所有内容。这似乎是非常重复和不必要的。再一次，它可能不是。黑暗或。光明的直接产物。它可能看起来像.light>.wrap>.dark>.internal>.card>.content>p。