有一個彈出視窗。選定的分期付款顯示在此彈出視窗中。用戶可以根據需要選擇盡可能多的分期付款。選定的分期付款有一個邊框底部。但我不希望最后一項是邊框底部。我嘗試了很多方法，但都失敗了。
html
<div className="installmentinfo__container only-desktop">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
z-index: 999;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
我嘗試了什么；
.column:last-child{
border-bottom: none;
}
.last-child{
border-bottom: none;
}
&:last-of-type {
border-bottom: none;
}
uj5u.com熱心網友回復：
使用 last-of-type 偽選擇器移除最后一個專案樣式
.column > div:last-of-type {
border-bottom:none;
}
更多詳情https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
uj5u.com熱心網友回復：
psuedo-lastchild 不是父容器的最后一個子容器，而是一個類的最后一個子容器。所以我所做的是給所有三個段一個相同的段，用于定位 css 的邊界側和其他 css 的 id彼此。
.installmentinfo__container.only-desktop {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
/* position: absolute; */
background-color: white;
/* top: 210px; */
margin: auto;
/* transform: translateX(-280px); */
padding: 0.3em;
z-index: 999;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
}
.column {
display: flex;
flex-direction: column;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
/* border-bottom: 1.5px solid #d1d1d1; */
padding-bottom: 5px;
}
#installmentnumber {
float: left;
width: 50%;
}
#installmentdate {
width: 50%;
color: black !important;
}
#installmentamount {
width: 80%;
color: black !important;
font-weight: 100;
}
.segments{
border-bottom: 1.5px solid #d1d1d1;
}
.segments:last-child{
border-bottom: none;
}
<body>
<div class="installmentinfo__container only-desktop">
<div class="installmentinfo">
<div class="column">
<div class="segments" id="installmentnumber" >{(i 1).toString()}</div>
<div class="segments" id="installmentdate">{billDate}</div>
<div class="segments" id="installmentamount">{e.amount}{e.currency}</div>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
在您的代碼段中，您將邊框底部提供給 .column 類，然后您嘗試使用 :last-child 選擇器用無邊框覆寫它，而不是您可以這樣做，
如果您正在考慮重復 .column div，那么您可以使用以下代碼段
.column:not(:last-of-type){
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
如果您想多次重復 .installmentinfo div 并且您想在 .installmentinfo 不是最后一個 div 時為列提供邊框底部，那么您可以使用以下代碼段
.installmentinfo:not(:last-of-type) .column{
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493350.html
標籤：javascript html css