使用 !important 覆盖带有 css 文件的内联 CSS 不起作用答案

【问题标题】：Overriding CSS inline with css file using !important does not work使用 !important 覆盖带有 css 文件的内联 CSS 不起作用
【发布时间】：2019-04-26 15:37:12
【问题描述】：

我在我的 Angular 应用程序中使用 following control，并且提供了原始 html。我想覆盖它。

如何用 css 覆盖以下类的内联样式？

<div class="selector selectorarrow selectorarrowleft" tabindex="0" ng-reflect-klass="selector" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" ng-reflect-value="1" style="width: 252px; height: 232px; top: 33px; left: 0px;"> ...

预期输出：（top 已修改，position 添加）

<div class="selector selectorarrow selectorarrowleft" tabindex="0" ng-reflect-klass="selector" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" ng-reflect-value="1" style="width: 252px; height: 232px; top: 10px; left: 0px; position: relative">

尝试了以下没有效果：

.selector.selectorarrow.selectorarrowleft[style] {
  position: relative !important
}

【问题讨论】：

您在 !important 之后缺少一个分号
@StefanBob 在规则中省略最后一个分号实际上是可以的（虽然不是好的做法）！
另外，您不需要选择器末尾的 [style]。 .selector.selectorarrow.selectorarrowleft { } 应该可以工作
@StefanBob 在这种特殊情况下，属性选择器完全可以。如果有的话，它会增加特异性。请参阅this fiddle，它按照 OP 想要的方式工作。
@dirtyWold “预期输出”到底是什么意思？使用样式表不会向元素的 style 属性添加属性。（更改仅在浏览器的检查工具中可见。）

标签： html css datepicker css-selectors

【解决方案1】：

我会删除 [style] 并添加 div 以使其更加具体，例如：

div.selector.selectorarrow.selectorarrowleft {
  position: relative !important;
  top: 10px !important;
}

【讨论】：