伪元素
时间：2023-03-28 13:19:04
HTML
实际做项目遇到的伪元素相关问题：1.问题描述：父元素上有一个after伪元素，父元素的子元素定义了一个点击处理函数。单击子元素时，不会调用该函数。去掉伪元素，函数就可以正常调用了。原因：存在伪元素时，点击子元素，不会调用子元素本身的点击函数，而是调用父元素的点击函数。猜测可能是伪元素覆盖了子元素的点击事件解决方法：在伪元素的样式中添加：pointer-events:none功能：禁止伪元素响应鼠标事件csspointer-events属性：指定在什么情况下（如果有的话）一个特定的图形元素可以成为鼠标事件的目标。什么是伪元素？伪元素实际上是元素的子元素。给一个元素添加一个beforeafter伪元素，相当于给该元素添加两个子元素。我在这里
.ele{&::before{content:'';}&::after{内容：'';}}通过浏览器工具查看dom结构:before为第一个子元素，after为最后一个子元素。伪元素常用写法&::after{display:block;内容：'';位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；background:rgba(0,0,0,0.04);}伪元素常用于：绘制：分隔符、点等小元素父元素的掩码：例如设置元素的大小伪元素等于父元素，覆盖父元素，通过设置一个背景色，给父元素加上遮罩。特殊字符：例如，用于表示该字段为必填项：一个红色的*。可以将伪元素的内容设置为指定的字符：content:'*'通常伪元素会添加如下样式：绝对定位（设置相对于父元素的位置）、content内容、显示特性使用伪元素可以简化html标签，并不是一个实际的html标签可以实现各种样式。它不会给dom造成负担，因为它不存在于dom结构中。所以伪元素是不能用js操作的。
