html – 为什么在Chrome中可以选择伪元素,除了最后一个,使用CSS

发布时间：2020-12-14 18:57:44 所属栏目：资源来源：网络整理

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

背景：

伪元素不应该是可选择的,因为它们是未生成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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!