在奇数元素上使用css规则创建浮动元素，并在HTML/css中显示none/block

Question

我正在使用一个元素列表(float或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是不可行的。

Answer 1

无需将nth-child复杂化。您可以简单地使用伪元素在中间绘制一条线。还要阅读以下内容来理解为什么您的代码不起作用：我可以将：nth-child((或：nth-of-type((与任意选择器组合吗？

* {box-sizing: border-box;}

.flex-container {
width: 90%;
margin: 5px auto;
display: flex;
background-color: #ddd;
flex-wrap: wrap;
position:relative;
}
.flex-container:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
width:1px;
background:red;
}
.flex-container>div {
background-color: #f1f1f1;
padding: 5px;
font-size: 12px;
cursor: pointer;
text-align: center;
width: 50%;
border-bottom: solid 1px #ccc;
}

<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" />

以下是使用CSS网格的另一个想法：

* {box-sizing: border-box;}

.flex-container {
width: 90%;
margin: 5px auto;
display: grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1px;
background: 
linear-gradient(red,red) center/1px 100% no-repeat,
#ddd;
}
.flex-container>div {
background-color: #f1f1f1;
padding: 5px;
font-size: 12px;
cursor: pointer;
text-align: center;
border-bottom: solid 1px #ccc;
}

<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" />