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

Question

背景:

Pseudo-elements 不应该是可选择的,因为它们是CSS生成的内容,不会插入到DOM中.

---

题:

问题是:

pseudo-elements除了最后一个,当counter()在content属性中使用CSS 功能时,为什么在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.143m(64位)/ Windows 10中重现.

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

Answer 1

因为周围没有负空间。如果你在周围添加一些空间，你可以用jsfiddle的解决方案达到预期的效果。

在现实生活中，这相当于用一只手从地板上抓起一个大盒子。如果地板和盒子之间有一点空间供您的手使用，则更容易将其拉下来。

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;
}