Как не наследовать стили CSS от родителей?

Question

Я хотел бы включить большой <div> внутри <div class="jumbotron">, как показано ниже, но он не должен присущи стилям CSS от родителей.

<div class="container"> 
    <div class="jumbotron"> 
HTML chunk here that should not inherent from parents 
    </div> 
</div> 

Here является большой HTML кусок, который визуализируется правильно и here, когда он был включен в шаблон Bootstrap, где размеры шрифта и больше перепутались.

Вопрос

Можно ли включать HTML кусок с ней присущи любые CSS стили от родителей?

Answer 1

Некоторые способы работы с или предотвращения наследования CSS:

1. Наиболее очевидным способом было бы удалить JumboTron CSS и написать свой собственный.

2. Во-вторых, вы можете попытаться изменить CSS, чтобы быть более конкретным. Например, используя расширенные css-селектора IE: .jumbotron > .childClass. Или такие вещи, как + :not() :first-child :last-child (и другие). Зависит от вашего варианта использования. См. advanced selectors.

Или если вы не хотите изменять или изменять CSS родительского класса. Тогда другой вариант - переопределить его с более высоким родителем. Например ...

<div class="jumboTronParent"> 
    <div class="container"> 
    <div class="jumbotron"> 
     <div class="myChildClass"></div> 
    </div> 
    </div> 
</div> 

.jumboTronParent .jumbotron > .myChildClass { 
    font-size:1em; 
    // applies font style to just first level children with this class 
} 

.jumboTronParent .jumbotron .myChildClass { 
    font-size:1em; 
    // applies font style to all children with class 
}