伪类伪元素应用。
:empty
介绍
:empty CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本(包括空格)。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。
兼容性
故事
讲个故事
原需求:A盒子下有E/F/G三个按钮,三个按钮分别有不同的权限控制是否展示。
最开始的实现逻辑是,若E/F/G三个按钮的权限判断都没有,则不展示A盒子。
但由于后续迭代,在E/F/G中分别又置入了不同的展示逻辑。导致在某些特殊场景中,E/F/G三个按钮都没有权限,但是A盒子被渲染出来了,导致多余的站位。
由于其中逻辑比较复杂,时间又比较紧,考虑使用css的方案解决。于是乎!找到了:empty的伪类方法!完美解决了这个问题。当A盒子下没有子元素时,把他的宽高padding,margin都去掉!