时间戳

首页 > 解决方案 > 是否可以选择共享同一 Css 课程的孩子，而不知道前面的课程？

html - 是否可以选择共享同一 Css 课程的孩子，而不知道前面的课程？

问题描述

上下文（跳过问题）： 在为在线打字游戏 Typeracer（在 Css 中）设计时尚主题时，我偶然发现了这个问题：

随着用户的进行，已经输入的文本部分会从灰色变为绿色。我想将这种绿色更改为任何其他颜色。 Typeracer 上的文本进度界面是什么样的

让它变得困难的是，这个块被分成多个跨度，没有任何 id，它们被分配了多个随机类——每场比赛都不同，并且在比赛期间发生变化： 文本进度界面架构示例

撇开最后一个跨度，它在上面的屏幕截图中折叠，我们不感兴趣——不同数量的跨度代表已经输入的文本部分，而不同数量的其他跨度代表没有输入的部分typed yet（在上面的屏幕截图中，前两个 span 包含“typed”部分，而后两个 span 代表“not typed”部分。但在同一场比赛的后期，这些数字可能变为 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”是我无法提前知道的随机属性类，是否可以选择前两个 div，它们共享“vdFKqLpl”作为它们的第一类？

标签： htmlcssstylish

解决方案

我不知道这是否会完全有效，但这可以让你更接近。

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>

推荐阅读