伪元素应用--遇到一个更新一个!

87 阅读1分钟

伪类伪元素应用。

:empty

介绍

:empty CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本(包括空格)。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。

兼容性

image.png

故事

    讲个故事
    原需求:A盒子下有E/F/G三个按钮,三个按钮分别有不同的权限控制是否展示。
    
    最开始的实现逻辑是,若E/F/G三个按钮的权限判断都没有,则不展示A盒子。
    
    但由于后续迭代,在E/F/G中分别又置入了不同的展示逻辑。导致在某些特殊场景中,E/F/G三个按钮都没有权限,但是A盒子被渲染出来了,导致多余的站位。
    
    由于其中逻辑比较复杂,时间又比较紧,考虑使用css的方案解决。于是乎!找到了:empty的伪类方法!完美解决了这个问题。当A盒子下没有子元素时,把他的宽高paddingmargin都去掉!
    

伪元素查找表!

developer.mozilla.org/zh-CN/docs/…