如何用CSS或jQuery在前序元素含tc-hidden类时正确设置tc4显示编号

• 原CSS中匹配tc2、tc3同时隐藏状态的选择器写法错误：.tc2.tc-hidden .tc3.tc-hidden ~ .tc4 中的空格代表后代选择器，但tc2和tc3是平级兄弟节点，不存在嵌套关系，因此这条规则完全不会生效。
• 最终生效的是单匹配tc3隐藏的规则 .tc3.tc-hidden ~ .tc4 h3.tm-section-label:before，因此tc4显示为3，不符合预期。

方案1：纯CSS修正（适合固定4个tc元素的场景） #

将原代码中错误的选择器替换为正确的兄弟选择器写法，确保双隐藏场景的规则优先级正确即可：

.tm-section-label:before{
    display:block;
    margin-top:10px;
    font: inherit;
}
.tc-hidden{
    display:none;
}
.tc1 h3.tm-section-label:before {
    content: "1";
}
.tc2 h3.tm-section-label:before {
    content: "2";
}
.tc3 h3.tm-section-label:before {
    content: "3";
}
.tc4 h3.tm-section-label:before {
    content: "4";
}
/* tc2单独隐藏时，tc3编号改为2 */
.tc2.tc-hidden ~ .tc3 h3.tm-section-label:before {
    content: "2";
}
/* tc3单独隐藏时，tc4编号改为3 */
.tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
    content: "3";
}
/* tc2、tc3同时隐藏时，tc4编号改为2，使用兄弟选择器匹配平级节点 */
.tc2.tc-hidden ~ .tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
    content: "2";
}

原有HTML结构不需要修改，即可实现tc2、tc3同时隐藏时tc4显示2的效果。

方案2：jQuery动态计算（适合元素数量可变的场景） #

如果后续tc节点会动态增减、隐藏状态会动态变化，硬写CSS覆盖规则维护成本高，可以通过jQuery自动统计可见节点的序号，自动赋值：

$(function(){
    // 计算编号的公共方法
    function updateTcNum(){
        $('.tc-cell').not('.tc-hidden').each(function(index){
            const currentNum = index + 1; // 序号从1开始计数
            $(this).find('.tm-section-label').attr('data-num', currentNum);
        })
    }
    // 页面初始化时执行一次
    updateTcNum();
    // 如果有切换元素显示/隐藏的交互，在切换逻辑后调用updateTcNum()即可实时更新编号
})

对应可以把CSS大幅简化：

.tm-section-label:before{
    display:block;
    margin-top:10px;
    font: inherit;
    content: attr(data-num);
}
.tc-hidden{
    display:none;
}

该方案不需要针对不同隐藏场景写特殊匹配规则，任意数量的tc节点、任意隐藏组合都能自动生成连续的正确编号，扩展性更强。

内容的提问来源于stack exchange，提问作者yasin