如何解决为什么“:last-child”选择器对我不起作用?
在我的应用程序中,我在html中运行对象数组以显示3种不同类型的服务的信息,并且在信息末尾,我想显示一个垂直条,它将充当分隔符。
<div class="column-service-container">
<div
class="column-service"
v-for="order in filteredOrder"
v-bind:key="order.name"
:class="{ focusService: order.name == focusService }"
@click="focusService = order.name"
v-on:click="getorder()"
>
<div class="column-service-wrapper">
<div class="column-service-text">
<div class="item-service-name">{{order.name}}</div>
<div class="item-service-description">{{order.full_description}}</div>
</div>
<div class="item-service-price">
{{order.itc.toString().replace(".",",") }}
<span class="price-currency">€</span>
<span class="ttc-desc">TTC*</span>
<input
ref="service"
type="radio"
name="selectedOrderService"
v-model="selectedOrderService"
:value="order.name"
/>
</div>
</div>
<div class="vert-sep"></div>
</div>
</div>
正如您在CSS下方看到的那样,我将信息放置在右侧带有分隔符栏的列中。当我想隐藏与最后一列相对应的栏时,就会出现问题。 我尝试使用“ last:child”选择器,如下所示,但这是行不通的。 在这种情况下,它将隐藏该类的3个小节。
.column-service-container {
display: flex;
justify-content: center;
}
.column-service {
display: flex;
justify-content: center;
}
.column-service-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
div.vert-sep {
width: 4px;
height: 200px;
margin-left: -2px;
background: $secondaryColor;
}
.vert-sep:last-child {
display: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。