如何覆盖带!important的CSS width属性？设置扩展容器下无宽度样式

要覆盖那个带!important的通用宽度设置，你需要利用更高的选择器特异性加上!important来强制覆盖原样式——因为原选择器已经用了!important，普通的优先级提升不足以覆盖它。

具体代码实现 #

你可以给第二个选择器设置合适的宽度值（比如自适应内容的auto，或者重置为默认的unset），同时加上!important：

.extendedForm .chosen-container {
  width: auto !important; /* 让容器根据内容自动调整宽度，实现"无固定宽度"的效果 */
}

可选的宽度值说明 #

根据你的实际需求，还可以选择其他值：

• fit-content：让容器宽度刚好适配内部内容（现代浏览器支持）
• unset：重置宽度为浏览器的默认值
• initial：将宽度恢复为CSS属性的初始默认值

为什么需要加!important？ #

原样式.chosen-container里的width: 100% !important用了!important标记，这会极大提升这条规则的权重。即使你的.extendedForm .chosen-container选择器特异性更高，没有!important的话也无法覆盖带!important的规则，所以必须在新规则里也加上!important才能生效。

内容的提问来源于stack exchange，提问作者Leonel Matias Domingos