如何使用CSS :not()选择器控制Video.js播放器关联容器的显示隐藏

1. 核心失效原因 #

你写的嵌套选择器语法属于Sass/LESS等CSS预处理器的语法，原生CSS不支持嵌套写法，浏览器无法识别这种嵌套规则，所以样式完全没有生效。

2. 修正后的CSS写法 #

直接展开嵌套规则，明确后代选择器的层级即可，Video.js的状态类默认挂载在播放器根节点上，正确写法如下：

/* 当播放器用户不活跃、且未暂停时，隐藏两个容器 */
.vjs-user-inactive:not(.vjs-paused) .playerNavigation__container,
.vjs-user-inactive:not(.vjs-paused) .playerControlBar__container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

/* 对应活跃/暂停状态的显示规则，保证过渡效果正常 */
.vjs-user-active .playerNavigation__container,
.vjs-user-active .playerControlBar__container,
.vjs-paused .playerNavigation__container,
.vjs-paused .playerControlBar__container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s, visibility 0.5s;
}

3. 额外说明 #

• 不要同时设置display: none和过渡效果：display属性不属于可动画属性，会直接打断过渡动画，改用visibility配合opacity控制显隐即可保留0.5s的淡入淡出效果。
• 如果样式仍未生效，可打开浏览器开发者工具检查两个点：
  • .vjs-user-inactive类是否确实添加在两个容器的父级节点上
  • 是否有更高优先级的CSS规则覆盖了当前写的显隐规则，必要时可给选择器增加父级类名提升权重，不推荐直接使用!important。

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