后代组合子CSS定义的顺序

对于HTML忍者来说，这一定是一个非常简单的问题，但我觉得我在这里遗漏了一些明显的东西。以下是一个片段：

#红色跨度{
颜色：红色；
}
#绿跨{
颜色：绿色；
}

红色的

绿色的

如果要对所有子体执行此操作，可以通过Javascript实现，如下所示，如果要应用多种颜色，它会减少许多代码行，但速度会比css慢。这取决于你的喜好

var colors=[“红色”、“绿色”、“蓝色”、“橙色”、“棕色”]
var span=document.querySelectorAll（'span'）；
span.forEach（函数（spanElement）{
颜色。forEach（函数（颜色）{
if（spanElement.closest（`${color}`）{
spanElement.style.color=color
}      
}) 
})

红色
绿色
绿色的

蓝色
橙色
棕色的

您可以使用

选择器使其仅应用于具有给定id的div内的特定span，而不是应用于div内的所有span

#green>span{
颜色：绿色；
}
跨度{
颜色：红色；
}

红色的

绿色

是的，你得到的结果绝对是意料之中的好，也许不是意料之中的，但它们是正确的。这是你的电话号码。这里有一个详细说明了完全相同的问题。（剧透：大多数选民都弄错了。）阅读回复进行更深入的讨论

目前，还没有任何CSS技术将“最近的父级”范围考虑在内。这是许多程序员普遍存在的误解。（CSS不是一种编程语言。）一个典型的程序员会想，“选择器

#red span

意味着无论我在哪里看到

#red

，在里面寻找

span

，然后应用样式。因为

#green span

在

#red

里面，绿色将在红色之后应用。”这是完全不正确的

CSS实际应用样式的方式是，它查看每个元素，然后从上到下遍历样式表，确定是否匹配，然后在执行时应用/覆盖样式。这只是级联的一个方面，以及其他方面（）。由于在第二个示例中，红色span在CSS源代码中排在最后，因此它将应用在最后，覆盖绿色span，而不管

span

在DOM中的

\red

中的“距离”有多近

要解决您的特定问题，最简单的方法是使用直接子选择器，如

\red>p>span

和

\green>p>span

。但正如您所怀疑的，如果您更改HTML，这些选择器将必须更新。耦合CSS和HTML是一件麻烦事，尤其是随着项目的发展

最好的策略是不依赖DOM来设置元素的样式。将

span

移动到

#red

之外时会发生什么情况？你想让它保持它的风格吗？对于可维护和可伸缩的CSS，您应该只使用类（而不是ID），并将类应用于您想要设置样式的实际元素，而不依赖于DOM结构或父子关系。这样，当您的HTML结构发生变化时，您就不必调整CSS来匹配

例如：

.red{
颜色：红色；
}
格林先生{
颜色：绿色；
}

红色的

绿色的

这只适用于直系后代，不是吗？如果我有

绿色

，或更多嵌套的标记，该怎么办？这不是一个好的解决方案，但您可以将所有的span颜色都设为红色，然后将绿色应用于所需的span，因此在这里，什么元素是嵌套层次结构中更直接的父元素并不重要？可能是特定于浏览器的吗？或者你能给我介绍一些文件吗？谢谢。这取决于你想如何使用它。如果要以一个元素为目标，或者如果要以该元素内的所有特定元素为目标。根据位置的不同，可以使用子代运算符n，也可以使用子代运算符n。据我所知，它不是特定于浏览器的。你可以参考这个链接这只适用于直系后代，不是吗？如果我有

绿色

，或者更多的嵌套标签呢？答案更新了，你可以通过Javascript而不是css选择器来实现它。对于Javascript，我认为我更愿意坚持控制css定义的顺序。如果你能回答我用粗体表示的问题，我会接受你的回答。关于粗体，这是因为css是层叠的，意味着它从上到下阅读。如果先是绿色，然后是红色，绿色将被红色覆盖

#red span

意味着选择

#red

元素中的每个

元素并设置其样式：请不要使用javascript来完成制作CSS的工作。JS速度慢，负担重，而且消耗资源。做你自己和你的用户——通过学习CSS来帮你一个忙。这很好，值得奖励。不过有一件事，在你的答案的前一版中，你提到了关于

的问题！重要的

修改器。这可能是一个非常容易（尽管概念上是错误的）解决我的原始问题的方法：

#green span{color:green！important；}

。也许你可以在你的答案中包含这一点，以确保完整性。谢谢！我不建议使用

！重要信息

尽管如此，因为在以后的过程中，您将面临失败，必须覆盖您自己的代码（或其他人的代码）。它实际上应该只用于测试、快速破解和满足紧迫的最后期限。