Переопределение стилей

[partoftheworlD]

Я начал делать свой скин для vivaldi и наткнулся на такую проблему, некоторые элементы переопределяют стиль заданный в css. Так что мне нужно переопределить переопределение стиля используя только CSS. 

типа:

<span class="button-badge" style="background-color: rgb(238, 49, 49);">1</span>

сам CSS.

 

Спойлер

.button-badge {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 9px;
  display: flex;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  justify-content: center;
  align-items: center;
  height: 13px;
  min-width: 13px;
  padding-left: 2px;
  padding-right: 2px;
  font-weight: 700;
  background-color: var(--colorHighlightBg);
  color: var(--colorHighlightFg);
  border-radius: var(--radiusRound);
  pointer-events: none;
  top: 5%;
  right: 5%;
  max-width: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

[Xipho]

попробуй к переопределяемому стилю добавить !important

[FENIX145]

Еще есть такая штука как приоритеты. !important не очень хорошая практика, по факту костыль. Но в данном примере у тебя используются инлайновые стили, так что да. МОжно через импортант. 

<span class="button-badge" style="background-color: rgb(238, 49, 49) !important;">1</span> 
либо сделать по человечески:
<span class="button-badge myClass">1</span>
.myClass {
  background-color: rgb(238, 49, 49);
} (это в Css файле)

P.S. В стилях можешь повысить приоритет используя не класс, а id и тогда у него будет максимальный приоритет до !important @partoftheworlD