Проблема наследования CSS

Question

У меня есть одна таблица стилей (layout.css), которая импортирует следующий CSS в верхней части таблицы стилей:

@import "reset.css";
@import "typography.css";
@import "forms.css";
@import "fonts/fonts.css";
@import "tablecloth.css";

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

Пример:

Применяется в макете.css:

#three-col-container #right-col.filter p.more { color: #ff0000; font-size: 1.2em; }

Применяется то, что говорит мне Инспектор (эти стили включены в таблицу стилей типографики):

p { font-size: 1em; color: #444; }

Я никогда не сталкивался с такой проблемой наследования,Другие таблицы стилей работают как положено.

Любые предложения приветствуются.

Спасибо.

Answer 1

#three-col-container #right-col.filter p.more означает:

Применить этот стиль к абзацам (p), которые имеют класс more, которые являются потомками чего-то, имеющего идентификатор right-col и класс filter , что является потомком чего-то с идентификатором three-col-container.

Это правильно?

Вы уверены, что в таблице стилей типографики правила стиля нев конце есть флаг !important?Вы правильно указали URL этой таблицы стилей?

Answer 2

Вы можете попробовать использовать флаг !important в конце правила, которое вы хотите переопределить, перед точкой с запятой.

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

Answer 3

Это может быть проблемой специфичности ??

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

• Добавить 1 для каждого элемента (ex p и a) и псевдоэлемент (например, :before и :after);
• добавьте 10 для каждого атрибута (ex [type=”text”]), class и псевдокласс (ex *)1027 * или :hover;
• И добавьте 100 для каждого ID ;
• и добавьте 1000 для встроенный стиль .

Итак, #three-col-container #right-col.filter p.more имеет 2 идентификатора, 2 класса и 1 элемент, поэтому он имеет вес 221 .

Возможно ли, что может существовать другое правило с более высоким весом, которое переопределяет ваше правило? Существуют ли какие-либо другие стили, кроме этих двух? (Или даже JavaScript, применяющий встроенные правила?)

Я пытаюсь ииспользуйте Firebug или инструменты Chrome / Safari Developer, чтобы попытаться выяснить, откуда берутся правила. Как правило, он даст вам имя css и строку, в которой находится правило, переопределенные правила будут зачеркнуты.Я выясняю, какие правила имеют приоритет, я могу повысить или понизить вес правила, чтобы оно правильно наследовало.

Hopefэто помогает!