乐趣区

关于前端:伪元素

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

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

退出移动版