css特效问题？

Question

<lify-app></lify-app>
<div class="preLoading">

<img class="preLoading__image" src='big.png'>

</div>

 lify-app:empty + .preLoading {
        opacity: 1;
        z-index: 100;
    }
    lify-app:empty + .preLoading .preLoading__image {
        animation: preLoadingAnimation 2s linear 2s infinite;
    }
这种css写法是什么意思？    

Answer 1

链接描述

:empty 和 + 都是选择器 :empty代表没有子元素, +代表后面的临近元素

Answer 2

lify-app:empty表示当lify-app元素没有子元素的状态，“+”是寻找后面的一个同级元素

这样写，就是当lify-app这个元素下面没有子元素时这些css样式才生效，否则不生效

例如下面这样，有了子元素，就不生效了

<lify-app>
  <span>666<span>
</lify-app>