关于前端:伪元素

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

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 操作伪元素。