jquery - CSS可以将第n个 child 与:not?一起计算吗

Question

我试图在纯 CSS 中在 仅可见的 的 div 元素之后放置一个明确的分隔符。由于 CSS 中没有这样的 :visible 选择器，我尝试在应该隐藏的 div 元素中添加一个名为 hidden 的类。

.box.hidden {
  background: red;
}
.box:not(.hidden):nth-child(4n+1) {
  border: 5px solid green;
}
/* try then without :not() and see the difference
.box:nth-child(4n+1) {
  border: 5px solid green;
}
*/

    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    

但我无法让它工作，似乎 nth-child(4n+1) 只听 .box 而不是 :not( .hidden) 规则。

如果没有 javascript/jQuery 这是不可能的，那么一个简单的 jQuery 选择器解决方案作为替代方案也可以作为解决方案。

如何实现？

Answer 1

要直接回答你的问题，“不”，nth-child 不是那样工作的。

The :nth-child() CSS pseudo-class matches one or more elements based on their position among a group of siblings.

确定兄弟位置时不考虑选择器。 :nth-of-type有点像，但仅基于元​​素类型而不是任意选择器。

请参阅此处示例 ~ https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Result

---

我建议使用 flex 布局而不是 float 和清除。

例如

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 0 1 25%;
}

.hidden {
  display: none;
}

<div class="container">
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
</div>