CSS 具有重复修饰符的后代选择

Question

以下尝试将修饰符 ('active') 应用于列表中的一个特定元素的方法有什么问题？这是嵌套排序列表的一部分，其分支和节点都是可排序的，并且需要 sortitem class。在示例中，第一个 '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>

Answer 1

去掉.bt和.active之间的space

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

通过删除两个 class 选择器之间的 space，您可以将样式应用于具有 .bt 和 [= 的元素12=] classes。通过它们之间的 space，您将样式应用于具有 .active class 的元素 inside 具有 [=11= 的元素] class.

CSS 具有重复修饰符的后代选择

CSS descendant selection with duplicate modifier

css

css-selectors

nested-sortable