使用Flex order Css时获取最后一个子级
使用Flex order Css时获取最后一个子级
提问于 2022-08-11 09:36:46
当使用flex顺序重新排列div时，我无法检测最后一个孩子。因为我已经安排了顺序的CSS与订单。它仍然得到了每棵树的最后一个孩子。项div是动态的。所以我们不能用第一个孩子。我应该如何得到最后一个孩子时，重新安排与秩序。可以有多个项目需要显示在顶部。我需要CSS或基于js的解决方案。我的代码
<div class="mainWrap">
<div class="item">first</div>
<div class="item">second</div>
<div class="item orderFirst">third</div>
<div class="item">fourth</div>
<div class="item orderFirst">fifth</div>
<div class="item">Six</div>
<div class="item orderFirst">Seven</div>
</div>
<style>
.mainWrap {display:flex; flex-direction: column;}
.mainWrap .item {order:2; border-bottom:1px solid #ccc}
.mainWrap .item:last-of-type {border-bottom:none;}
.mainWrap .item.orderFirst {order:1;}
</style>回答 3
Stack Overflow用户
回答已采纳
发布于 2022-08-11 11:44:55
如果您真的决定这样做，您可以使用javascript查找最后一个没有orderFirst类和样式的元素。不过，这似乎是对order属性的错误使用。
const mainWrap = document.querySelector(".mainWrap");
const children = [...mainWrap.children];
const ordered = children.filter((c) => !c.classList.contains("orderFirst"));
const last = ordered.pop();
last.style.setProperty("border-bottom", "none");.mainWrap {
display: flex;
flex-direction: column;
}
.item {
order: 2;
border-bottom:1px solid #ccc;
}
.item.orderFirst {
order: 1;
}<div class="mainWrap">
<div class="item">first</div>
<div class="item">second</div>
<div class="item orderFirst">third</div>
<div class="item">fourth</div>
<div class="item orderFirst">fifth</div>
<div class="item">Six</div>
<div class="item orderFirst">Seven</div>
</div>
Stack Overflow用户
发布于 2022-08-11 10:04:39
您可以这样反转您的border：
.item {
order: 2; // this seems wrong by the way
border-top: 1px solid #ccc; // set the TOP border on every .item
}
.item.orderFirst {
order: 1;
border-top: none; // unset it for the (visually) first element
}如果您的实际用例与示例一样简单，这将为您提供所需的服务。
Stack Overflow用户
发布于 2022-08-11 10:08:39
您的意思是删除最后一个可见元素的边框，而不是div容器mainWrap的最后一个元素，对吗？
.mainWrap {display:flex; flex-direction: column;}
.mainWrap > div { order:2; border-bottom: 1px solid #ccc }
.mainWrap > div:nth-last-child(2) { border-bottom:none; }
.mainWrap > div:last-child { order:1; background: red;} <div class="mainWrap">
<div class="item">first</div>
<div class="item">second</div>
<div class="item">third</div>
<div class="item">fourth</div>
<div class="item orderFirst">fifth</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73318488
复制相关文章
相似问题
腾讯云开发者
