CSS для предотвращения дочернего элемента от наследования родительских стилей

Возможный дубликат:
Как предотвратить наследование CSS?

Есть ли способ объявить свойство CSS элемента таким образом, чтобы он не затрагивал ни одного из его дочерних элементов или существует способ объявить CSS элемента для реализации только указанного стиля и не наследовать ни один из объявленных стилей для своих родителей?

Быстрый пример

HTML:

<body>
    <div id='container'>
        <form>
            <div class='sub'>
                Content of the paragraph
                <div class='content'>Content of the span</div>
            </div>
        </form>
    </div>
</body>

CSS

form div {
    font-size: 12px;
    font-weight: bold;
}
div.content {
    /* Can anything go here? */
}

В нормальных условиях можно было ожидать, что текстовый блок "Содержание абзаца" и "Содержание диапазона" будет 12 пикселей и полужирным.

Есть ли свойство для включения в CSS выше в блоке "div.content", что предотвратит его наследование объявления в блоке "#container form div", чтобы ограничить стиль только "содержанием абзаца" и запасной "Контент диапазона", включая других дочерних div?

Если вам интересно, почему, ну, я создал конкретный файл CSS, который придает всем формам моего проекта особое чувство, а divs по форме все наследуют чувство. Нет проблем. Но внутри формы я хочу использовать Flexigrid, но flexigrid наследует стиль, и он просто выглядит бесполезным. Если я использую flexigrid вне формы и, таким образом, он не наследует формы css, тогда он выглядит великолепно. В противном случае это выглядит ужасно.

Ответ 1

К сожалению, вам здесь не повезло.

Существует inherit, чтобы скопировать определенное значение из родителя в его дочерние элементы, но нет другого свойства в обратном направлении (в котором будет задействован другой селектор, чтобы решить, какой стиль будет возвращен).

Вам нужно будет вручную изменить изменения стиля:

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

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

form div.sub { color: red; }

form div div.content { /* remains green */ }

Изменить: Рабочая группа CSS до чего-то:

div.content {
  all: revert;
}

Не знаю, когда и когда-нибудь это будет реализовано браузерами.

Изменить 2: По состоянию на март 2015 года все современные браузеры, но Safari и IE/Edge, внедрили его: https://twitter.com/LeaVerou/status/577390241763467264 (спасибо, @Lea Verou!)

Изменить 3: default было переименовано в revert.

Ответ 2

Не можете ли вы сами форматировать формы? Затем соответствующим образом создайте divs.

form
{
    /* styles */
}

Вы всегда можете отменить унаследованные стили, сделав это важным:

form
{
    /* styles */ !important
}

Ответ 3

Правила CSS наследуются по умолчанию - следовательно, это "каскадное" имя. Чтобы получить то, что вы хотите, вам нужно использовать! Important:

form div
{
    font-size: 12px;
    font-weight: bold;
}

div.content
{
    // any rule you want here, followed by !important
}