CSS: Как переопределить стиль элемента

CSS
Dopamine
17.08.2022 07:07:34 am
На сайте, есть блок (.js_box_content) с несколькими списками, что отображаются в зависимости от поставленной задачи, и этот блок добавляется динамически: 
<div class="js_box_content">
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
	<div class="js_temp_friend_search_form_holder">
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
	</div>
</div>

Для одного списка потребовалось отступить от края на 45px: 
.js_box_content ul {
	list-style-type: square;
	margin: 2px 0 2px 45px;
}

Для других списков, что находятся внутри блока (.js_temp_friend_search_form_holder) отступа быть не должно. Я сделал так: 
.js_temp_friend_search_form_holder ul {
	margin: 0;
}

Но список блока .js_temp_friend_search_form_holder пользовался стилем, что был написан для блока js_box_content.

Тут у меня было два варианта:
  1. Вписать атрибут style непосредственно в тег <ul> с нужными мне свойствами.
  2. Добавить !important к уже существующему свой ству margin: 0;.

Я выбрал второй вариант: 
.js_temp_friend_search_form_holder ul {
	margin: 0 !important;
}

Так работает, как задумано.

!important - следует использовать при противоречии двух стилей для одного элемента. !important - повышает приоритет свойства.