在奇数元素上使用css规则创建浮动元素，并在HTML / CSS中不显示任何内容/块

Question

我正在做一个程序，其中包含一系列元素（浮动或flex），这些元素可能显示为“ none”，并且可以动态更改。当用选择器定义它时，我设法在CSS中完成它：

div:nth-child(odd)

但是，如果我隐藏一个div，它将不再起作用。我尝试过类似的>>

div[style*="display: block;"]:nth-child(odd)
但休息。

* {box-sizing: border-box;}
 
.flex-container {
  width: 90%;
  margin: 5px auto;
  display: flex;
  background-color: #ddd;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.flex-container>div {
  background-color: #f1f1f1;
  display: block;
  padding: 5px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  width: 50%;
  border-bottom: solid 1px #ccc;
}

.flex-container>div[style*="display: block;"]:nth-child(odd) {
  border-right: solid 1px red;
}
<div class="flex-container">
  <div id="flex1" style="display: block;">TEST 1</div>
  <div id="flex2" style="display: block;">TEST 2</div>
  <div id="flex3" style="display: block;">TEST 3</div>
  <div id="flex4" style="display: block;">TEST 4</div>
  <div id="flex5" style="display: block;">TEST 5</div>
</div>

<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />

使用按钮时，它显示/隐藏第一个div。我想要的是始终在中间有这个红色边框。

我想尽可能避免使用JavaScript。

也许我完全理解错了，或者没有javascript是不可行的。

我正在做一个程序，其中包含一系列元素（浮动或flex），这些元素可能显示为“ none”，并且可以动态更改。当用选择器定义它时，我设法在CSS中完成它：div：nth -...

Answer 1

无需繁琐的nth-child。您可以使用伪元素简单地在中间画一条线。另请阅读以下内容以了解您的代码为何不起作用：Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?