如何在 parent class 被切换的后代 class 上应用 css 属性？

Question

我需要在 div 上应用一些 css，其 parent div 的 class 基于 class 切换。我想在 child div 上应用一些 css。 parent div 有 classes 作为 .pricing-section 和 .new-pricing-section。它们根据标志切换。完整的parentdiv如下：

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 应用到 div 和 btn class。我是这样做的：

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

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

Answer 1

.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
}

Answer 2

逗号表示这是一个新的 selector。看来你这里确实有一个错误。

这将适用于 .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 分离成一个额外的 class 可能更清晰。所以你有下面的按钮。

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

所有依赖于此的东西都是 new 定价部分，您有 pricing-section new 作为 class 列表。你可以 select 和 .pricing-section.new.

如何在 parent class 被切换的后代 class 上应用 css 属性？

How to apply css property on a descendent class where the parent class is being toggled?

javascript

css

reactjs