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

概述背景： 伪元素不应该是可选择的,因为它们是未生成DOM的CSS生成的内容. 题： 问题是： 为什么在内容属性中使用CSS counter()函数时,Chrome中可以选择伪元素(最后一个除外)？ 插图： 代码： jsFiddle body { margin: 0;}ul { margin: 0; padding: 0; height: 100vh; list-style: 背景：

伪元素不应该是可选择的,因为它们是未生成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与该问题无关,在演示中用于说明的目的.

解决方法 因为周围没有负空间.如果你添加一些空间可以达到想要的效果 jsfiddle with the solution.

在现实生活中,相当于用一只手从地板上抓住一个大盒子.如果你的手在地板和箱子之间有一点空间,它更容易拉开.

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

总结

以上是内存溢出为你收集整理的html – 为什么在Chrome中可以选择伪元素,除了最后一个,使用CSS counter()函数时？全部内容，希望文章能够帮你解决html – 为什么在Chrome中可以选择伪元素,除了最后一个,使用CSS counter()函数时？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。