习惯性的注释习惯，带来的看似奇怪的bug

这是js文件的部分代码：

//左侧设备状态列表
                    '<div class="real_trafficRight">'+
                    '<p class="realTrafficList-title">设备状态列表</p>'+
                    '<table  class="real_trafficRight_table">'+
                    '<tr v-for="(items,id) in deviceStates" @mouseenter="deviceStateMouseEnter(id)" :class="{sys_set_li_active:id==isDevStaMouEn}" >'+
                    '<td class="real_trafficRight_td">{{items[0]}}</td>'+
                    '<td>{{items[1]}}</td>'+
                    '</tr>'+
                    '</table>'+
                    '</div>'+

这是CSS文件的样式文件：

//左边设备状态相关样式
 .real_trafficRight{
    position: absolute;
    top: 11%;
    background-color: #000000;
    color: #fff;
    z-index: 1;
    border: #0e90d2 2px solid;
    width: 12%;
 }
   .real_trafficRight_ta{
    line-height: 20px;
    text-align: center;
    font-size: 15px;
    width: 98%;
    margin: 3px;
   }

运行结果：

浏览器可以解析到real_trafficRight_ta这个样式，但解析不到real_trafficRight的样式。

找了半天错误，就是CSS文件的注释不是//eg：//左边设备状态相关样式

而是<!--  --!>或者/*  */.

由于注释习惯，给自己挖了个坑！！！！