我需要在其父 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". 我希望它適用于這兩種情況。如何解決這個問題？
uj5u.com熱心網友回復：
逗號表示這是一個新的選擇器。看來，您實際上在這里有一個錯誤。
這將適用于.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;
}
也就是說，將newout 分成一個額外的類可能更干凈。所以你有下面的按鈕。
.pricing-section .btn.btn-link.show-more-link {
text-transform: none;
margin-left: auto;
}
所有依賴于這個new定價部分的東西，你都有pricing-section newclassList。您可以使用 選擇的那個.pricing-section.new。
uj5u.com熱心網友回復：
.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
}
uj5u.com熱心網友回復：
您需要稍微更改您的選擇，因為您所做的意味著當父母有班級時選擇父母，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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/483349.html
標籤：javascript css 反应