javascript - 在奇数元素上使用 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 是不可行的。

标签： javascripthtmlcssflexboxcss-float

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