Как переопределить div по id?

Question

Я хочу отредактировать мой div с идентификатором, но где-то он не будет загружаться, потому что он уже определен, и я не могу его переопределить. Может быть, вы, ребята, имеете представление о том, что здесь происходит.

Вот проблема, я хочу отредактировать этот div, но высота уже определена и кажется, что она не будет переопределена ... в чем может быть проблема? https://gyazo.com/03c4e641ba55863f82177a37214d7516

div#main_slider{
  height: 471px;
  visible: hidden;
}

<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">
</div>

Answer 1

Как вы сказали, id уже определено, у вас есть следующие варианты для решения этой проблемы:

• Использовать !important
• Использовать встроенный стиль для указания c div
• Предоставьте div еще один id и используйте этот новый id для переопределения.

Answer 2

Предполагая, что у вас есть простое div, вы можете использовать !important для переопределения.

Остерегайтесь использования important, его следует использовать только как последний параметр, поскольку important переопределяет все свойства, которые вы определить.

!important : ignore subsequent rules, and any usual specificity issues, apply this rule!'

div#main_slider{
height: 471px !important;
visible: hidden;
border:1px solid black;
font-size: 24px !important;
	}

<div id="main_slider" > My Div </div>

Вот еще одно решение без использования important, выберите только селектор id.

#main_slider{
   height: 471px;
   border:1px solid black;
   font-size: 24px;
	}

<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">My Div
</div>

Answer 3

Inline Style

Ссылка, которую вы разместили для демонстрации DIV со встроенным стилем. Это отличается от стиля, уже примененного с помощью другого стиля CSS, и не может быть перезаписан обычными правилами стиля

Пример

#main_slider{
  height: 100vh;
  background: red; /* <-- won't override the inline style */
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>

---

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

У вас есть два варианта применения стиля к элементам, которые имеют встроенный стиль.

1. Подробнее Inline Styling

Это может быть выполнено одним из двух способов; непосредственно на элементе или через скрипт. В этом примере желтый фон применяется непосредственно к элементу. Скорее всего, если вы не добавили встроенный стиль, он был динамически обновлен с помощью скрипта. Вы также можете использовать скрипт для его обновления, как показано в примере ниже.

Пример

main_slider.style.backgroundColor = 'red';

#main_slider{
  height: 100vh;
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>

Обратите внимание, единственное отличие заключалось в перемещении CSS в JavaScript. В этом случае red перезаписал ранее существовавший yellow.

2. Используйте !important

Флаг !important дает ему преимущество над встроенным стилем и спецификой несущественных стилей; Однако этот метод следует использовать в качестве крайней меры. Единственный способ позже переопределить !important - использовать их больше (в дополнение к специфике).

#main_slider{
  height: 100vh;
  background: red !important;
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>