关于vue中同时使用v-if和nth-of-type时的bug

问题引出

需求：例如我想要在某一个ul元素中使用v-if条件时渲染 2 个li元素，
同时第一个和第二个的样式不同，这里我使用了nth-of-type选择器去设置样式，
但是当v-if条件改变时，li元素的样式没有改变，看了下开发者工具，元素对应的选择器
没有改变，即使此时仅剩第二个li元素，它仍旧被nth-of-type(2)选中

代码：

<ul>
    <li v-if="pwdError">密码错误</li>
    <li v-if="countError">次数超限</li>
</ul>

.ul > li:nth-of-type(1) {
    color: red;
}
.ul > li:nth-of-type(2) {
    color: green;
}

比如此时这里当有两个错误提示时，第一个需要是红色，第二个需要是绿色，但是当错误数量从2个变为1个时，
如果消失的是第一个错误，这时候原先的第二个错误应该变为红色才对，但是实际它仍被nth-of-type(2)选中

解决办法

由于我这里只使用了两个元素，选择器我从nth-of-type换成了兄弟元素选择器+，
但是仅局限于两个元素的情况

.ul > li {
    color: red;
}
.ul > li+li {
    color: green;
}

如果是多个li的情况，建议直接更新外层的元素ul