VideoJS：修改进度条中vjs-mouse-display元素的margin-top属性

这种情况我之前调试VideoJS的时候也碰到过！核心问题就是库内部的样式优先级比你自定义的选择器更高，导致你的margin-top设置被覆盖了。下面给你几个可行的解决办法：

• 提升选择器特异性（最推荐）
  你可以给选择器增加更多层级或者更具体的类来提高优先级。比如如果你的视频容器有自定义父类（比如.custom-video-wrap），可以把选择器写成：

  .custom-video-wrap .video-js .vjs-progress-control div.vjs-mouse-display {
    margin-top: 12px; /* 替换成你需要的数值 */
  }
  

  如果没有自定义父类，也可以利用VideoJS自带的状态类（比如.vjs-fluid、.vjs-playing）来增强特异性：

  .video-js.vjs-fluid .vjs-progress-control div.vjs-mouse-display {
    margin-top: 12px;
  }
  

• 检查样式加载顺序
  确保你的自定义SCSS文件是在VideoJS官方CSS之后引入的。如果你的样式加载在库样式之前，即使选择器优先级相同，库的样式也会覆盖你的设置。

• 使用!important作为最后手段
  如果你试过上面的方法还是无效，可以临时用!important强制覆盖，但尽量少用，避免后续出现样式冲突：

  .video-js .vjs-progress-control div.vjs-mouse-display {
    margin-top: 12px !important;
  }
  

• 用开发者工具精准排查
  按F12打开浏览器开发者工具，选中vjs-mouse-display元素，查看「样式」面板里哪个选择器在控制它的margin属性，看看你的自定义样式有没有被划掉。通过这种方式能更精准地调整选择器的优先级。

内容的提问来源于stack exchange，提问作者Eugeny89