如何在父类被切换的子类上应用 css 属性？答案

【问题标题】：How to apply css property on a descendent class where the parent class is being toggled?如何在父类被切换的子类上应用 css 属性？
【发布时间】：2023-02-17 03:32:15
【问题描述】：

我需要在其父 div 的类根据类切换的 div 上应用一些 css。我想在子 div 上应用一些 css。父 div 的类为 .pricing-section 和 .new-pricing-section。它们根据标志切换。完整的父div如下：

const togglePriceSection = isPricingDetailsFeatureEnabled ? "new-pricing-section" : "pricing-section";
<div className={togglePriceSection}>
    <div className="btn btn-link btn-icon show-more-link" onClick={() => setExpanded(!expanded )}>
                        {pricesList.length > 6 && !expanded ? "Show More" : expanded ? "Show Less" :null}
                    </div>
</div>

我想将 css 应用到带有 btn 类的 div。我是这样做的：

.pricing-section, .new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

问题是这些属性仅在父 div 具有 className=".new-pricing-section" 时应用，而不是在 className=".pricing-section" 时应用。我希望它在这两种情况下都能得到应用。如何解决这个问题？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

逗号表示这是一个新的选择器。看来您实际上在这里有一个错误。

这将适用于.pricing-section 和.new-pricing-section .btn.btn-link.show-more-link

.pricing-section, 
.new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

你真的想申请.pricing-section .btn.btn-link.show-more-link和.new-pricing-section .btn.btn-link.show-more-link

.pricing-section .btn.btn-link.show-more-link, 
.new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

也就是说，将 new 分离到一个额外的类中可能更清晰。所以你有下面的按钮。

.pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

依赖于此的所有内容都是 new 定价部分，您将 pricing-section new 作为 classList。您可以使用.pricing-section.new 选择那个。

【讨论】：

【解决方案2】：

.pricing-section .btn.btn-link.show-more-link {
    // css if child is under pricing-section
}
.new-pricing-section .btn.btn-link.show-more-link {
    // css if child is under new-pricing-section
}

【讨论】：

【解决方案3】：

您需要稍微更改您的选择，因为您所做的意味着选择具有 pricing-section 的父项，以及当父项具有类 `new-pricing-section 时选择子项：

.pricing-section .btn.btn-link.show-more-link, .new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

【讨论】：