项目总结（关于css中的class类在html中显示的时候被覆盖的问题）

今天在做需求的时候出现了这样一个问题，

<div class="apply_text">
        <div class="apply_head" *ngIf="applyrecordlist.productType!='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1"
            [class.status2]="applyrecordlist.status==2" [class.status3]="applyrecordlist.status==3" [class.status4]="applyrecordlist.status==4"
            [class.status5]="applyrecordlist.status==5" [class.status99]="applyrecordlist.status==99" [class.status7]="applyrecordlist.status==7"
            [class.status8]="applyrecordlist.status==8" [class.status10]="applyrecordlist.status==10" [class.status20]="applyrecordlist.status==20"
            [class.status21]="applyrecordlist.status==21" [class.status22]="applyrecordlist.status==22" [class.status23]="applyrecordlist.status==23"
            [class.status24]="applyrecordlist.status==24" [class.status25]="applyrecordlist.status==25" [class.status26]="applyrecordlist.status==26"><span>{{applyrecordlist.status | applystatus}}</span></span>
        </div>
        ***<div class="apply_head" *ngIf="applyrecordlist.productType=='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1 || applyrecordlist.status==31"
            [class.status2]="applyrecordlist.status==2 || applyrecordlist.status==3 || applyrecordlist.status==4 || applyrecordlist.status==30"
            [class.status5]="applyrecordlist.status==5 || applyrecordlist.status==19" [class.status99]="applyrecordlist.status==6"><span>{{applyrecordlist.status | newApplystatus}}</span></span>
        </div>***
  </div>

上面是发现问题修改之后的代码，下面是原先的代码

<div class="apply_head" *ngIf="applyrecordlist.productType=='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1"
            [class.status2]="applyrecordlist.status==2" [class.status2]="applyrecordlist.status==3" [class.status2]="applyrecordlist.status==4"
            [class.status5]="applyrecordlist.status==5" [class.status5]="applyrecordlist.status==19" [class.status2]="applyrecordlist.status==30"
            [class.status99]="applyrecordlist.status==6" [class.status1]="applyrecordlist.status==31"><span>{{applyrecordlist.status | newApplystatus}}</span></span>
   </div>

和上面最后一个div里面的内容相对比，就可以发现问题了，首先我现在开发的这个项目是angular+ionic，所以class类都是根据条件的true或者false来添加的。
刚开始时，我这边状态值返回的是status=1，按照条件判断的话，这时候apply_status这个span应该加上status1这个class类了，但是去查看效果的时候，却没有效果，why？如果返回的状态值status=31的话，这是status1这个class类就加上了，这时候我就更加疑惑了，都是在true的情况下，为什么一个生效了，一个没有生效？百思不得其解，最后豁然开朗。原来是这样的。

请听我慢慢解释，首先状态值status=31的时候，这时候样式status1的增加是在样式增加的最后面，而状态值status=1的时候，样式status1的增加是在样式增加的最前面，判断过之后，这时增加了status1的class类已经加上了，但是样式还会往下走，去一个一个地去检验样式，一个一个地去添加样式，到最后了，由于这时候status=1，而最后的status=31时才会是true，所以这时候status1就是false了，就加不了了，说白了就是后面的把前面的给覆盖掉了。

从这个我得出了这样一条结论，样式的添加思维和js的思维是不一样的，原先可能认为当status等于某个值得时候就不往下执行了，但是这个思维在样式的思维里是走不通的，要谨记！

最后执行的样式会把前面的给覆盖掉！