css 如何显示元素之间的规则，即使它们是隐藏的？[关闭]

wooyq4lh 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(119)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
3天前关闭。
Improve this question
我想在div之间显示行。换句话说，我想在每个div的顶部画一条线，除了第一个。
我写了下面的CSS，除了一些div是隐藏的之外，它工作得很好。当然，由于一些div被隐藏，选择器:not(:first-child)不再执行预期的工作。有没有办法在纯CSS中解决这个问题？
我不能使用display: none来隐藏div有两个原因。

元件是可折叠的
这些元素必须保留在流中以用于文本搜索

.item {
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.item:not(:first-child) {
  border-top: 1px solid red;
}

.item.hide {
  overflow: hidden;
  height: 0;
}

<div class="container">
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item ">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
</div>

css

来源：https://stackoverflow.com/questions/76343372/how-can-i-show-a-rule-between-elements-even-when-theyre-hidden

2条答案

按热度按时间

qcbq4gxm1#

使用下一个元素~，这样两个连续的项目div就不能有HIDE类来显示边框。

.item {
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.item:not(.hide) ~ .item:not(.hide) {
  border-top: 1px solid red;
}

.item.hide {
  overflow: hidden;
  height: 0;
}

<div class="container">
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item ">Item 1</div>
  <div class="item hide">Item 1</div>
  <div class="item hide">Item 1</div>
</div>

赞(0）回复(0）举报 2023-05-30

njthzxwz2#

如果你想保留隐藏的div，我们可以简单地移除它们的边框，但是这样会在最后一个可见元素处留下一个分隔符

.item { 
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
}

.item:not(:first-child) { 
    border-bottom: 1px solid red;
}

.item.hide {
    overflow: hidden;
    height: 0;
  border: none;
}

<div class="container">
    <div class="item hide">Item 1</div>
    <div class="item hide">Item 1</div>
    <div class="item ">Item 1</div>
    <div class="item hide">Item 1</div>
    <div class="item ">Item 1</div>
    <div class="item hide">Item 1</div>
</div>

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何显示元素之间的规则，即使它们是隐藏的？[关闭]

2条答案

相关问题

热门标签

最新问答