为何video设置max-width:100%时标签选择器生效类选择器不生效

问题成因 #

这个问题本质是max-width属性被优先级更高的CSS规则覆盖，类选择器本身是正常生效的（你提到border-radius等其他样式正常就可以验证这一点），常见场景如下：

• 全局样式/UI库样式中存在权重更高的video相关规则，单独指定了max-width属性，没有指定border-radius等其他属性
  比如存在这类规则，权重高于你的单个类选择器：

  /* 类+标签组合，权重10+1=11，高于单个类的权重10 */
  .page-content video {
    max-width: 900px;
  }
  /* 带属性选择器的标签规则，权重和类平级，只要加载顺序晚于你的类样式就会覆盖 */
  video[controls] {
    max-width: 800px;
  }
  

  这类规则只写了max-width，没有写border-radius，所以你的类选择器里的border-radius不会被覆盖，能正常生效。
• 存在带!important标记的max-width规则，只要不是用同样带!important的更高优先级规则，都会被它覆盖。

排查方案 #

打开浏览器开发者工具（F12），选中对应的video元素，查看样式面板中的max-width属性：

1. 如果你写的.my-video-class下的max-width被划掉，说明确实被更高优先级的规则覆盖，面板会直接显示当前生效的max-width来自哪条选择器
2. 如果你的类样式里根本没有出现max-width属性，检查是不是CSS文件加载失败、类名拼写错误（不过你其他样式生效可以排除这个可能）

解决方法 #

可以根据找到的覆盖规则调整你自己的样式权重，比如：

/* 增加标签选择器提升权重，和常见的全局规则权重平级甚至更高 */
video.my-video-class {
  max-width: 100%;
}
/* 确实需要时可以加!important，不推荐优先用 */
.my-video-class {
  max-width: 100% !important;
}

内容的提问来源于stack exchange，提问作者Rogier de Ruijter