Vue 2.x转换不适用于Html标记Id CSS

只是好奇这是否是vue的预期行为，或者可能有一些我没有看到的潜在CSS逻辑

• 当使用类选择器设置默认的“right”属性时，以下Vue转换工作

.theBoxClass{right:100px；}

但在使用css ID选择器进行设置时不会

#theBoxId{right:100px；}

CodePen

代码

<div id="background"></div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="vue">
  <transition name="slide">
    <div id="theBoxId" class="box" v-if="show">ID</div>
  </transition>

  <transition name="slide">
    <div class="theBoxClass box" v-if="show">Class</div>
  </transition>
  <button v-on:click="onShowClick">CLICK ME TWICE</button>
</div>


body {
  margin: 0;
  padding:20px;  
}

button
{
  background:red;
  padding:30px;
  color:white;
  font-weight:bold;
}

.box{
   background:gray;
  width:100px;  
  position:fixed;  
  height:100px;
  text-align:center;
  color:white;
  font-size:20px;
  line-height:100px;  
}
.theBoxClass
{
  top:20px;
  right:100px;
}

#theBoxId
{
   top:220px;
   right:100px;
}


    .slide-enter-active , 
    .slide-leave-active {
      transition: right 1s ease-out;    
    }

    .slide-enter,
    .slide-leave-to  { 
       right:-100px;
    }



new Vue({
  el: "#vue",
  data: {  
    show: false
  },
  methods: {
    onShowClick: function() {
      this.show = !this.show;
    }
  }
});

身份证件
等级
点击我两次
身体{
保证金：0；
填充：20px；
}
按钮
{
背景：红色；
填充：30px；
颜色：白色；
字体大小：粗体；
}
.盒子{
背景：灰色；
宽度：100px；
位置：固定；
高度：100px；
文本对齐：居中；
颜色：白色；
字体大小：20px；
线高：100px；
}
.theBoxClass
{
顶部：20px；
右：100px；
}
#theBoxId
{
顶部：220px；
右：100px；
}
.滑入激活状态，
.滑动保持活动状态{
过渡：右1放松；
}
.滑入，
.向左滑到{
右：-100px；
}
新Vue({
el:“vue”，
数据：{
节目：假
},
方法：{
onShowClick:function（）{
this.show=！this.show；
}
}
});

正在更改

.slide-enter,
.slide-leave-to  { 
   right:-100px;
}

到

使其与ID一起工作，因为ID选择器的值大于类选择器的值：

以下选择器类型列表按特定性增加：

•类型选择器（例如h1）和伪元素（例如：：before）

•类选择器、属性选择器和伪类

•ID选择器（例如#示例）

.slide-enter,
.slide-leave-to  { 
   right:-100px !important;
}