记录一次愚蠢的css冲突问题

作者: 长街漫步 | 来源:发表于2020-08-20 17:58 被阅读0次

问题：
同层目录下一个 position 元素，一个用了css 伪类，实现一个三角旋转的效果，结果 position 层级没有把底层的元素彻底覆盖，原因是写了一个 transform！！！！

image.png

一个很小的问题，浪费了时间，实属不该。所以写css 的时候能使用图片的还是建议使用图片。
下面是冲突部分代码

<div>position 元素</div>
<p class="down">position 元素</p>

.down::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 15px;
  background-size: 100% 100%;
  background-image: url("../Images/menu_down.png"); // 一个向下的小箭头
  /* transform: rotate(90deg); */
  /* opacity: 0.6; */
}

.top::after {
  background-image: url("../Images/menu_top.png"); // 旋转变成 向上的小尖头
  /* transform: rotate(180deg); */
}