时间戳

首页 > 解决方案 > 如何将 :before 伪类与 :not 伪类一起使用？

css - 如何将 :before 伪类与 :not 伪类一起使用？

问题描述

是否可以使用before伪类并附加not伪类？

例如，给定一个简单的项目列表，我在每个列表项目名称后面添加一个“浅灰色”点：

// HTML:

<ul>
  <li>Ace</li>
  <li class="notme">Bay</li>
  <li>Cat</li>
</ul>


// CSS:

li {
  padding: 10px;
  color: green;
}

li::before {
  content: '';
  z-index: -1;
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background: lightgray;
}

另请参阅以下代码笔： https ://codepen.io/philipyoo/pen/KKMPOgW

我想要实现的是继续依赖before伪类，但不要添加它为类的任何列表项提供的样式notme。

在 codepen 示例中，“Ace”和“Cat”应继续具有浅灰色圆圈背景，“Bay”不应具有浅灰色圆圈背景。有没有办法将伪类链接not到before伪类？

标签： css

解决方案

在这里你有：codepen - 只需使用li:not(.notme):before { ... }

推荐阅读