Блог

Главная - Вопросы по программированию - Запретить CSS * наследовать определенный элемент и его дочерние элементы

Запретить CSS * наследовать определенный элемент и его дочерние элементы

#css

#css

Вопрос:

Я знаю, что есть много вопросов о наследовании CSS, но ни одно из того, что я видел, не относится к моему делу.

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

Некоторые из этих веб-сайтов имеют ужасные правила CSS, например:

 *{
 color:green;
 font-size:20px;
}

Как вы видите, это будет применено ко всем элементам моего виджета.

 <div class="mywidget">
 Hello <b>World</b>
 <span>Lorem Ipsum</span>
</div>

<style>
.mywidget{
 color:brown;
 font-size:15px;
}

.mywidget span{
 font-size:18px;
 font-weight:bold;
}
</style>

Даже если я попытаюсь повторно применить css к mywidget <b> span тегам and , они не изменятся из-за предыдущего * правила css, конечно, решением было бы создать кучу правил CSS для каждого тега, который у меня есть, что мне не нравится.

Любые решения CSS или Javascript приветствуются

Ответ №1:

Вы можете победить * в своей собственной игре, используя ее самостоятельно для сброса всех наследуемых свойств:

 .mywidget * {
    color: inherit;
    *color: #000; /*include this line only if you need IE7 support */
    font-size: 100%
}

После этого добавьте весь свой CSS для .mywidget и элементы внутри него, как обычно.

Комментарии:

1. Я бы использовал color: inherit; font-size: 100%

2. @BoltClock: я согласен с font-size , но IE7 вызывает у меня сомнения в использовании inherit .

3. @thirtydot Что делать, если mywidget для color установлено значение brown и содержит <b> тег, который должен быть коричневым, но не имеет определенного класса, я думаю, он будет черным вместо коричневого (его родительского).

Ответ №2:

Попробуйте это:

 .mywidget, .mywidget *{
 color:brown;
 font-size:15px;
}

Ответ №3:

Я бы предположил, что для этого существует несколько решений, наиболее прямым было бы добавить !important к свойству, которое перезапишет стили по умолчанию, например 

 font-size:15px !important;