带有重复修饰符的 CSS 后代选择 [重复]答案

【问题标题】：CSS descendant selection with duplicate modifier [duplicate]带有重复修饰符的 CSS 后代选择 [重复]
【发布时间】：2020-08-01 16:16:45
【问题描述】：

以下尝试将修饰符（'active'）应用于列表中的一个特定元素的方法有什么问题？这是嵌套可排序列表的一部分，其分支和节点都是可排序的，并且需要 sortitem 类。在示例中，第一个“X”应该用橙色突出显示，但事实并非如此。我希望 CSS 不会因此而感到困惑，不是吗？这里肯定有一些值得我学习的东西......

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .class-0 {
        position: absolute;
        background: rgba(85, 85, 85, 0.80);
        left: 0.5%;
        top: 1%;
        height: 98%;
        width: 26%;
    }
    .class-0 .sortitem {
        font-size: 33px;
        line-height: 1.3;
        margin-right: 10px;
        display: inline-block;
    }
    .class-0 .sortitem .bt {
        background: #55f;
        font-size: 29px;
    }
    .class-0 .sortitem .bt .active{
        background: #ff9b00;
    }
</style>
</head>
<body>
<span class="class-0">
    <span class="sortitem">
        <span class="sortcont">
            <span class="sortitem bt active"><span>X</span></span>
            <span class="sortitem bt"><span>X</span></span>
            <span class="sortitem bt"><span>X</span></span>
        </span>
    </span>
</span>
</body>
</html>

【问题讨论】：

这个问题已被标记为重复，但我认为这是错误的。它假设询问的人会知道一个人实际上可以分离或加入 css 选择器，这是她或他可能不知道的事情
如果您认为这是一个不同的问题，请编辑您的问题以包含更多详细信息

标签： css css-selectors nested-sortable

【解决方案1】：

删除.bt和.active之间的空格

.class-0 .sortitem .bt.active{
    background: #ff9b00;
}

通过删除两个类选择器之间的空格，您将样式应用于具有两个 .bt 和.active 类的元素。通过它们之间的空间，您将样式应用于具有.active 类的元素，这些元素在具有.bt 类的元素。

【讨论】：

这样就解决了问题。认为嵌套是问题，我完全被误导了。不知道可以分离或加入选择器。谢谢！
不客气！