我有一個由兩種類型的項目組成的列表，這些項目總是分組，而不是混合。比如:

a
a
a
b
b
b

如何在a項和b項之間顯示一個分隔符，一條水平線。但是，即使有些項目已經顯示:沒有，我如何才能做到這一點。

例如:

a
a
a
(Show line here)
b
b
b

a
a
a
b [display: none]
(Show line here)
b
b

a
a
(Show line here)
a [display: none]
b
b
b

只有以一種不那么令人難以置信的方式，css才有可能做到這一點嗎？

現在我用javascript手動完成這項工作。

在第一個/最后一個項目上使用邊框頂部或邊框底部不是一個解決方案，因為當樣式接觸到邊框時，它看起來是關閉的，我希望線條完全分開。我猜是一個偽元素，但如果它意味著使用position: absolute hacks(除非它非常簡單)，就不是了。

我用javascript做的事情:

App.check_pinline = () => {
  App.remove_pinline()
  let last_pinned

  for (let item of App.get_items(`tabs`)) {
    if (!item.visible) {
      continue
    }

    if (item.pinned) {
      last_pinned = item
    }
    else {
      if (!last_pinned) {
        return
      }
      else {
        let pinline = DOM.create(`div`, `pinline`)
        last_pinned.element.after(pinline)
        return
      }
    }
  }
}

這很大程度上取決于你擁有的HTML結構和你如何隱藏元素(你沒有在你的問題中包括它，所以這只是我的假設)。我建議在同類的最后一個可見元素上使用::after偽元素。

如果顯示:無來自內嵌樣式:

.a:not(:has(~ .a:not([style*='display: none']))):not([style*='display: none'])::after {
    content: '';
    height: 1px;
    background: black;
    width: 100%;
    display: block;
}

case 1
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>
<br>
case 2
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="b" style="display: none;">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>
<br>
case 3
<div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a" style="display: none;">a</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
  <div class="b">b</div>
</div>

它可以用simple :not和兩個規則來解決(也就是說，沒有modern :has，這還沒有在穩定的Firefox中實現)。

將分隔符分配給所有可見對象的第一條規則。b在跟蹤任何可見的東西。a，然后第二個把分隔符從所有。出于演示目的，使用簡單的邊框頂部:實心；-在{ content:“”之前使用::命令；顯示:塊；邊框頂部:實心；}或類似的東西會起同樣的作用。

.a:not([hidden]) ~ .b:not([hidden]) {
  border-top: solid;
}

.a:not([hidden]) ~ .b:not([hidden]) ~ .b {
  border-top: none
}

/* demo */
body { counter-reset: figs; }
figure { counter-increment: figs; counter-reset: as bs;}
figcaption::before { content: 'Fig 'counter(figs) ' - '; }
p { margin: 0; --m: 'visible';}
[hidden] { display: block !important; opacity: 0.3; --m: ' hidden';}
p::before { content: attr(class) '#'; }
.a { counter-increment: as; }
.b { counter-increment: bs; }
.a::after { content: counter(as) ' ' var(--m); }
.b::after { content: counter(bs) ' ' var(--m); }

<figure>
  <figcaption>Everything visible:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b"></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>

<figure>
  <figcaption>First <code>.b</code> hidden:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b" hidden></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>

<figure>
  <figcaption>Last <code>.a</code> hidden:</figcaption>
  <p class="a"></p>
  <p class="a"></p>
  <p class="a" hidden></p>
  <p class="b"></p>
  <p class="b"></p>
  <p class="b"></p>
</figure>
<figure>
  <figcaption>All but first and last hidden:</figcaption>
  <p class="a"></p>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
  <p class="b"></p>
</figure>
<figure>
  <figcaption>only <code>.a</code>'s visible</figcaption>
  <p class="a" hidden></p>
  <p class="a"></p>
  <p class="a"></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
  <p class="b" hidden></p>
</figure>
<figure>
  <figcaption>only <code>.b</code>'s visible</figcaption>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="a" hidden></p>
  <p class="b"></p>
  <p class="b" hidden></p>
  <p class="b"></p>
</figure>

使用& lthr & gt用于制作斷開線的標簽