使用 css 规则在奇数元素上创建浮动元素并在 HTML/CSS 中显示无/块

Question

我正在做一个包含元素列表（浮动或弹性）的程序，该列表可能显示“无”，可以动态更改。当它用选择器定义时，我设法在 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。您可以使用伪元素在中间简单地画一条线。* {box-sizing: border-box;}&nbsp;.flex-container {&nbsp; width: 90%;&nbsp; margin: 5px auto;&nbsp; display: flex;&nbsp; background-color: #ddd;&nbsp; flex-wrap: wrap;&nbsp; position:relative;}.flex-container:before {&nbsp; content:"";&nbsp; position:absolute;&nbsp; top:0;&nbsp; bottom:0;&nbsp; left:50%;&nbsp; width:1px;&nbsp; background:red;}.flex-container>div {&nbsp; background-color: #f1f1f1;&nbsp; padding: 5px;&nbsp; font-size: 12px;&nbsp; cursor: pointer;&nbsp; text-align: center;&nbsp; width: 50%;&nbsp; border-bottom: solid 1px #ccc;}<div class="flex-container">&nbsp; <div id="flex1" style="display: block;">TEST 1</div>&nbsp; <div id="flex2" style="display: block;">TEST 2</div>&nbsp; <div id="flex3" style="display: block;">TEST 3</div>&nbsp; <div id="flex4" style="display: block;">TEST 4</div>&nbsp; <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;}&nbsp;.flex-container {&nbsp; width: 90%;&nbsp; margin: 5px auto;&nbsp; display: grid;&nbsp; grid-template-columns:1fr 1fr;&nbsp; grid-column-gap:1px;&nbsp; background:&nbsp;&nbsp; &nbsp; linear-gradient(red,red) center/1px 100% no-repeat,&nbsp; &nbsp; #ddd;}.flex-container>div {&nbsp; background-color: #f1f1f1;&nbsp; padding: 5px;&nbsp; font-size: 12px;&nbsp; cursor: pointer;&nbsp; text-align: center;&nbsp; border-bottom: solid 1px #ccc;}<div class="flex-container">&nbsp; <div id="flex1" style="display: block;">TEST 1</div>&nbsp; <div id="flex2" style="display: block;">TEST 2</div>&nbsp; <div id="flex3" style="display: block;">TEST 3</div>&nbsp; <div id="flex4" style="display: block;">TEST 4</div>&nbsp; <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" />