为表格行设置多个:has()选择器时遇到问题求助

问题背景 #

使用WooCommerce创建嵌套产品表格，无法修改HTML标记。主产品行使用类tc-container-table-product，关联产品行使用类tc-associated-table-product。当前样式仅对主产品行后的第一个关联产品行生效，后续关联产品行无效果，目标是让主产品行无下边框，嵌套的主产品+关联产品行整体看起来像一行。

原SCSS代码 #

tr.tc-container-table-product {
            @apply mb-0;

            + tr:not(.tc-associated-table-product) {
                @apply mt-4;
            }

            &:has(+ .tc-associated-table-product) {
                @apply mb-0 !border-b-0 rounded-bl-none rounded-br-none;
            }

            &:has(+ .tc-associated-table-product):has(+ .tc-associated-table-product) {
                @apply mb-0 !border-b-0 rounded-bl-none rounded-br-none;
            }
        }

原HTML结构 #

<table>
    <tbody>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-container-table-product">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-container-table-product">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
        </tr>
        <tr class="woocommerce-cart-form__cart-item cart_item tm-epo-cart-row-product-noepo tc-associated-table-product">
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

错误分析 #

1. 重复无效的:has选择器：&:has(+ .tc-associated-table-product):has(+ .tc-associated-table-product)是重复判断，没有实际作用——它只是两次检查紧邻的下一个元素是否为关联产品行，并没有处理后续多个关联产品行的情况。
2. 未处理关联产品行之间的边框：原代码只关注了主产品行的下边框，没有对关联产品行的上下边框做统一处理，导致后续关联产品行之间出现分隔线，破坏整体视觉效果。

修正后的SCSS代码 #

tr.tc-container-table-product {
    @apply mb-0;

    // 主产品行后非关联产品行时添加上边距
    + tr:not(.tc-associated-table-product) {
        @apply mt-4;
    }

    // 主产品行后紧跟关联产品行时，移除自身下边框
    &:has(+ .tc-associated-table-product) {
        @apply mb-0 !border-b-0 rounded-bl-none rounded-br-none;
    }
}

// 统一处理关联产品行样式
tr.tc-associated-table-product {
    // 移除关联产品行上边框，避免与主产品/前关联行分隔
    @apply !border-t-0;

    // 关联产品行后仍有关联行时，移除自身下边框
    &:has(+ .tc-associated-table-product) {
        @apply !border-b-0;
    }

    // 最后一个关联产品行，恢复下边框和右下角/左下角圆角
    &:not(:has(+ .tc-associated-table-product)) {
        @apply rounded-bl-md rounded-br-md;
    }
}

效果说明 #

• 主产品行后只要有关联产品行，就会移除下边框，和第一个关联行无缝衔接。
• 所有关联产品行移除上边框，且中间的关联行都移除下边框，形成连贯的整体。
• 最后一个关联产品行保留下边框并恢复圆角，让整个嵌套组呈现完整的块级视觉效果。

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