提问人：Poem 提问时间：9/6/2020 更新时间：9/6/2020 访问量：47
是否可以在不知道前方班级的情况下选择共享同一 Css 班级的孩子？
Is it possible to select children sharing the same Css class, without knowing that class ahead?
问：
上下文（跳过问题）：在为在线打字游戏 Typeracer （in Css） 设计时尚主题时，我偶然发现了这个问题：
随着用户的进度，已键入的文本部分将从灰色变为绿色。我想把这个绿色换成任何其他颜色。Typeracer 上的文本进度界面是什么样子的
让它变得困难的是，这个方块被分成多个跨度，没有任何 id，这些跨度被分配了多个随机类——每场比赛都不同的类，并且在比赛中会发生变化： 文本进度接口的架构示例
撇开最后一个跨度不谈，它在上面的屏幕截图中折叠了，我们对此不感兴趣——不同数量的跨度表示文本中已经键入的部分，而不同数量的其他跨度表示尚未键入的部分（在上面的屏幕截图中，前两个跨度包含“类型化”部分， 而最后两个跨度表示“未类型化”部分。但在同一场比赛中，这些数字可能会变成 1 和 2，或者 3 和 1，等等。
但是，我注意到表示已键入文本的跨度和表示尚未键入的文本的跨度共享相同的第一类：在屏幕截图 #2 的示例中，“已键入”部分跨度将“vdFKqLpl”作为其第一个类，而“尚未键入”部分跨度具有“CARsHknB”作为其第一类。
我尝试通过它们的style.color属性来选择第一组跨度：
.span[style*="color: #99cc00;"] {
color: #ff0000;
}
但我没有得到任何结果。
问题：是否可以使用 css 选择共享相同第一个类的子元素，而无需具体知道该类是什么？
例如，如果父 div 为：
<div>
<span unselectable="on" class="vdFKqLpl">When the little bluebird, who has never said a word, starts to sing, </span>
<span unselectable="on" class="vdFKqLpl CARsHknB">"Spri</span>
<span unselectable="on" class="CARsHknB WvLvCiod">n</span>
<span unselectable="on" class="CARsHknB">g</span>
<span unselectable="on">...</span>
</div>
其中“vdFKqLpl”和“CARsHknB”是我事先不知道的随机归因类， 是否可以选择共享“vdFKqLpl”作为其第一类的前两个 div？
答：
0赞
dantheman
9/6/2020
#1
我不知道这是否完全有效，但这可以让你更接近。
span {
color: green;
}
span[class*=" "], span[class*=" "] ~ span {
color:red;
}<div>
<span unselectable="on" class="vdFKqLpl">When the little bluebird, who has never said a word, starts to sing, </span>
<span unselectable="on" class="vdFKqLpl CARsHknB">"Spri</span>
<span unselectable="on" class="CARsHknB WvLvCiod">n</span>
<span unselectable="on" class="CARsHknB">g</span>
</div>
评论