當使用CSS counter（）函數時，為什么在Chrome中可以選擇偽元素，除了最后一個偽元素？

Question

背景：

Pseudo-elements不應該是可選擇的，因為它們是CSS生成的內容，而不是插入到DOM中。

---

題：

問題是：

為什么在Chrome中可以選擇pseudo-elements ，除了最后一個，在content屬性中使用CSS counter()函數？

---

插圖：

---

代碼鏈：

的jsfiddle

 body { margin: 0; } ul { margin: 0; padding: 0; height: 100vh; list-style: none; display: flex; text-align: center; justify-content: center; align-items: center; counter-reset: list-items; } li { flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; counter-increment: list-items; } li:first-child { background-color: forestgreen; } li:nth-child(2) { background-color: whitesmoke; color: saddlebrown; } li:nth-child(3) { background-color: firebrick; } li:hover { background-color: black; color: white; } li::before { font-size: 10vw; content: counter(list-items, upper-alpha); } 

 <main> <nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> </main> 

---

筆記：

在ChromeVersión53.0.2785.143m（64位）/ Windows 10中重現。

• 這不會發生在FF和Edge中。
• 可以使用前綴屬性解決-webkit-user-select: none; 在偽元素中。
• Flexbox與此問題無關，它在演示中用於說明目的。

Answer 1

因為周圍沒有負空間。 如果你添加一些空間，你可以達到解決方案所需的效果。

在現實生活中，它相當於用一只手從地板上抓起一個大盒子。 如果你的手在地板和盒子之間有一點空間，它就更容易拉下來。

ul {
  margin: 0 10px;
  padding: 0;
  height: 90vh;
  list-style: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  counter-reset: list-items;
}