Переопределение стилей без!

Как можно переопределить стили, указанные в другой таблице стилей?

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

ОТВЕТЫ

Ответ 1

Это зависит. CSS - это каскадные таблицы стилей, и существует конкретный порядок применения стилей, переписывание предыдущих стилей. Не вдаваясь в подробности:

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

Итак, какая специфика? В принципе, это сумма каждого селектора в правиле. Итак:

a {
    background-color: black;
    color: white;
}

Имеет менее специфичность:

body a {
    color: orange;
}

. Селекторы идентификаторов имеют более высокую специфичность, чем селектор классов, которые имеют такую ​​же специфичность, что и селекторы псевдокласса, которые имеют более высокую специфичность, чем селекторы тегов. Поэтому, если весь ваш контент содержится в <div> с id от content, вы сможете переопределить стиль, который выглядит так:

body a {
    border: 0;
}

С

#content a {
    border: 1px solid black;
}

Ответ 2

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

Это называется "каскадом", из документации:

Каскадные

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

Ответ 3

Если вы можете увеличить специфичность стилей, вы можете сделать это без !important.

Например:

HTML

<div id="selector">
  <a>Hello</a>
  <a class="specific">Hi</a>
</div>

CSS

div a {}

Будет проигнорирован, если вы укажете определенный класс внутри #selector

.specific { }

Вот демон объясняющее мою мысль. В принципе, идея состоит в том, чтобы определить стили как можно ближе.

Ответ 4

посмотрите http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

<p class="example">
    This is a <strong>test</strong>.
</p>

strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }

Текст будет синим. Порядок правил не имеет значения.