关于前端:伪元素

理论做我的项目时遇到的伪元素相干问题：

1.

问题形容：父元素上有一个after伪元素，该父元素的子元素定义了click处理函数，点击子元素，该函数没有被调用。将伪元素去掉，函数能够失常被调用。
起因：有伪元素的状况下，点击子元素，子元素本身的click函数不会被调用，但父元素的click函数有被调用。 猜测可能是伪元素盖住了子元素的点击事件
解决： 给伪元素的款式上增加：pointer-events: none 作用：禁止伪元素响应鼠标事件

css pointer-events 属性 ：指定在什么状况下 (如果有) 某个特定的图形元素能够成为鼠标事件的target

什么是伪元素

伪元素其实是一个元素的子元素。给一个元素增加before after伪元素，就相当于给该元素加了两个子元素。
<div className={style.ele}>我在这</div>

.ele {
  &::before {
    content: '';
  }

  &::after {
    content: '';
  }
}

通过浏览器工具查看dom构造：before作为第一个子元素，after作为最初一个子元素。

伪元素的常见写法

&::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.04);
}

伪元素常常能够用于：
画图： 比方分隔线、点等小元素
一个父元素的遮罩：比方设置伪元素大小等于父元素，盖在父元素上，通过设置一个背景色，给父元素增加一个蒙层。
特殊字符： 比方用于示意该字段是必填的： 一个红色的* 。能够设置伪元素的content为指定的字符: content: '*'

个别会给伪元素增加以下款式：相对定位（设置绝对父元素地位），content内容，display

特点

应用伪元素能够简化html标签，它不是一个理论的html标签，却能够实现各种款式。
它不会对dom造成累赘，因为它不存在于dom构造中。因而也就无奈用js操作伪元素。