avalon框架中ms-visible和ms-if的区别

在avalon的官方教程中说，ms-visible的作用是使元素在一定条件下隐藏，不显示，ms-if“同样隐藏，但它是将元素移出DOM。这个功能直接影响到CSS :empty伪类的渲染结果”

那么，什么是伪类？

它与class、id等功能类似，也是用来选取元素的标签，但是使用伪类时，是根据元素的状态来选择，通过伪类来选择元素，则该选择条件是独立于DOM的，只与元素当前状态有关。伪类用符号":"表示。比如:empty，用来匹配没有任何子元素(包括text节点)的元素E.。

在css中指定该状态下元素的样式，代码如下：

<style>p:empty{color:red;}</style>

则当元素没有任何子元素时，其颜色变为红色。

理解了伪类，我们再回到ms-visible和ms-if的区别上，ms-if在隐藏元素的同时，将元素移除了DOM，这样就有可能出现元素中不再包含子元素的情况，即满足:empty状态。而ms-visible只是隐藏元素，并不将其从DOM中移除。