Переопределить макет CSS

Question

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

Answer 1

CSS чувствителен к порядку.

Если вы определите стили для первого элемента, а затем определите стили для всех элементов, тогда стили для всех элементов будут иметь приоритет даже для первого элемента.

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

Answer 2

Я не предпочитаю использовать !important Я бы предпочел поместить класс в первый элемент и стилизовать его так:

<!-- html -->
<ul>
  <li class="first">first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>


/* css */
ul li {
  color: blue;
}

ul li.first {
  color: red;
}

Answer 3

В объявлениях стиля используйте !important, например:

.myFirstOne {
    color: blue !important; /* for example */
}

Убедитесь, что вы поставили !important в последнюю очередь. Есть ли способ вывести атрибуты из атрибута style в класс? Это было бы более чистым и менее утомительным способом сделать это, поскольку !important должен идти после каждого объявления.

См. эту ссылку для получения дополнительной информации о правилах каскадирования CSS.