Переопределение свойства CSS

Question

Мой HTML выглядит так:

<a class="another addAnother">Add another</a>

Я определил стиль для вышеупомянутого, используя «другой» класс, подобный этому, во внешней таблице стилей.

fieldset.associations a.another {
   color: #693;
   display: block;
   margin: 7.5px 0px 15px;
}

Я пытаюсь переопределить стиль тега, используя класс 'addAnother', например так (везде, где требуется):

fieldset.associations a.addAnother {
   display: none;
}

Но я не могу переопределить. Любая помощь приветствуется.

Есть ли правило, что при переопределении стиля селектор должен быть таким же (я пробовал это, но безрезультатно) ??

Answer 1

Обе ваши оригинальные декларации имеют специфику 0,0,2,2. Если второе объявление ниже первого, оно должно отменять его. Если этого не произойдет, измените порядок объявлений или увеличьте конкретность.

---

Вы можете добавить тег body для увеличения специфичности:

body fieldset.associations a.addAnother {
 display: none;
}

Это увеличит специфичность на 0,0,0,1, минимальное количество специфичности, которое вы можете добавить.

---

Вы также можете сделать его специфичным для класса .another, связав объявления классов:

fieldset.associations a.another.addAnother {
 display: none;
}

Это увеличит специфичность на 0,0,1,0.

---

Вот статья, объясняющая специфику CSS . Обратите внимание, что в статье не упоминается, что !important увеличивает специфичность на 1,0,0,0, что делает практически невозможным отмену.

Answer 2

Оба свойства имеют одинаковую важность, поскольку оба селектора одинаково специфичны. Таким образом, если второй появляется первым в CSS, ему нужно приобретать больше значения, чтобы переопределить тот, который находится ниже. Вы можете переопределить первый, указав более конкретный пример, например:

fieldset.associations a.addAnother.another {
   display: none;
}

или

#someID fieldset.associations a.addAnother {
   display: none;
}

или

body fieldset.associations a.addAnother {
   display: none;
}

Answer 3

В конечном итоге это будет зависеть от того, где эти два стиля находятся в вашем CSS, но вы не можете придать еще одну важность, как это:

fieldset.associations a.addAnother {
    display: none !important;
}

Answer 4

fieldset.associations a.addAnother {
   display: none !important;
}