Специфичность селектора не имеет значения Bootstrap

Question

Я пытаюсь переопределить свойство right для элемента h1, который он наследует от класса carousel-caption bootstrap. Он наследует право: 15%, и я пытаюсь установить его на 0%. Я нашел другой пост, который побудил меня добавить id = "bootstrap -overrides" к тегу и затем использовать селектор: # bootstrap -overrides h1.second, но это по-прежнему не удаляет свойство. Я проверяю также в элементе inspect, и это свойство не вычеркнуто. Когда я снимаю это свойство в элементе проверки, у меня остается желаемое поведение.

код из компонента React:

<div id="initialImage">
  <img src={logo} alt="Failed to load Image" class="img-fluid" />
  <div class="carousel-caption greeting">
    <h1 class="first">First.</h1>
    <h1 class="second">Second.</h1>
  </div>
</div>

CSS:

#bootstrap-overrides h1.second {
  right: 0%;
  float: right;
  font-family: "Rock Salt", cursive;
  color: #fff2f4;
}

и, как уже упоминалось, в теге body моего индекса есть id # bootstrap -riverdes. html. Может ли это быть как-то связано с расположением импорта для boostrap?

Answer 1

Просто для подтверждения, вы добавляете id="bootstrap-overrides" непосредственно к h1? Если это так, ваш css должен выглядеть следующим образом: h1#bootstrap-overrides в противном случае, если вы применяете его к родителю h1, попробуйте добавить важный к вашему css, например: #bootstrap-overrides h1 { right: 0!important; }