Как обойти стиль в элементе, который автоматически применяется через класс?

Question

У меня есть список ul-li, в котором есть элемент span внутри всех li.В настоящее время существует класс css, который применяется к этому элементу span [или, так сказать, элементам span внутри всех li], например:

.detail_div ul li span{
//some styles
}

Теперь для определенного элемента span внутри, скажем, последнего liЯ хочу обойти вышеупомянутый (по умолчанию) класс CSS и дать другой стиль.Как мне этого добиться?

Пожалуйста, помогите мне.Спасибо.

Answer 1

Если просто объявить стиль снова не получится. E.g.:

.detail_div ul li span{
  color: red;
}

Затем поставьте !important после стиля. Э.Г.

.detail_div ul li span{
  color: red !important;
}

Для последнего пункта добавьте :last-child. Э.Г.

.detail_div ul li:last-child span{
  color: red !important;
}

А для чего-то посередине используйте :nth-child(number). Например. секунда LI:

.detail_div ul li:nth-child(2) span{
  color: red !important;
}

Answer 2

.detail_div ul li span {
   // Some Styles
}
.detail_div ul li:last-child span {
   // UNDO above styles
}

Второе определение соответствует только последнему li.

Редактировать : Или вы можете назначить элементам списка, которые вы хотите удалить, новый класс:

<ul>
   <li><span>Styled</span></li>
   <li class="unstyled"><span>Unstyled</span></li>
   <li><span>Styled</span></li>
</ul>

CSS:

.detail_div ul li span {
   // some styles
}
.detail_div ul li.unstyled span {
   // undo above styles
}

Или вы можете использовать псевдокласс nth-child .