html – 为什么在Chrome中可以选择伪元素,除了最后一个,使用CSS counter()函数时？

伪元素不应该是可选择的,因为它们是未生成DOM的CSS生成的内容.

题：

问题是：

为什么在内容属性中使用CSS counter()函数时,Chrome中可以选择伪元素(最后一个除外)？

插图：

代码：

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.143 m(64位)/ Windows 10.

>这不会发生在FF和Edge.
>可以使用前缀属性来解决-webkit-user-SELEct：none;在伪元素.
> Flexbox与该问题无关,在演示中用于说明的目的.