如何从外部包中覆盖重要的样式

Question

问题是我无法在项目中覆盖CSS属性，因为外部CSS文件的目标属性上有!important，并且在该外部CSS文件之后加载了style.css

示例：

包css样式：

.ui-slider .ui-slider-handle {
    color: red !important;
    ...
}

我的style.css样式：

.ui-slider {
    color: red !important;
    ...
}

Answer 1

像这样更改样式：

body .ui-slider .ui-slider-handle {
    color: red !important;
}

如果将样式加载到外部样式之后，则外部样式将被您的样式覆盖。

通过在规则中添加body选择器，您的规则将比外部文件中的规则更精确，并且即使您的样式在外部样式之前加载，它也具有更高的优先级。

Answer 2

如果您的css在外部css之后加载，则您的css将覆盖它。

即。

external.css

.ui-slider .ui-slider-handle {
    color: red !important;
    ...
}

internal.css

.ui-slider .ui-slider-handle {
    color: blue !important;
    ...
}

结果： 颜色：蓝色；

Answer 3

尝试在此控件上方添加一个自己的类（例如：sb-slider）， 然后像下面一样使用

.sb-slider {
  .ui-slider .ui-slider-handle {
     color: blue !important;
     ...
  }
}

希望这对您有所帮助。

Answer 4

尝试一下：

.ui-slider[style] {
    color: red !important;
    ...
}