css reset под конкретным div

Question

Я знаю, что есть много вопросов, подобных, но ни один из них не помог. в конкретном div мне нужно очистить весь формат css от уровня выше этого div.

например, «h2» имеет стиль для всего веб-сайта, розовый и его тонкий, но под классом = «foo» h2 необходимо перезагрузить черный, но если я захочу, я смогу поставить любой другой класс под foo div и h2 красный будет использоваться.

Общие h2> розовый

<h2>I am pink</h2> 

<div class="foo"> 
<h2>I am black</h2> 
</div> 

<div class="foo"> 
<div class="somestyle"> 
<h2>I am red</h2> 
</div> 
</div> 

спасибо за вашу помощь

Answer 1

Вы должны принять во внимание порядок старшинства в CSS (или каскад), если вы объявите свой h2 элемент, чтобы быть розовым в глобальном масштабе, чем это будет читаться как розовый, независимо от того, где он стоит. Если вы не укажете другой стиль под определенным классом, он будет изменен. Таким образом, в вашем случае, CSS будет читаться так:

h2 { 
    color:pink; 
} 

• Все h2 элементы будут отображаться как розовый

.foo h2 { 
    color: black; 
} 

• Под .foo класса все h2 элементы будут отображаться как черный ,

.somestyle h2 { 
    color:red; 
} 

• Под .somestyle класса всех h2 элементов будет отображаться красным цветом.

Вы можете обойти, что, будучи более конкретными с селекторы, например, так:

.somestyle .foo h2 { 
    color:blue; 
} 

• Здесь вы выбираете любой h2 элемент, который является дочерним .foo, который является потомком .somestyle и давая другой цвет. Обратите внимание на особенности этого селектора .somestyle .foo, в отличие от менее специфичного селектора, такого как .foo.

demo

Обратите внимание, как был написан порядок. Сначала у вас есть свой глобальный стиль h2, а затем вы указываете разные цвета в других классах для того, чтобы перезаписать этот порядок. Так что все дело в организации.

Вот хорошая статья о порядке старшинства: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Примечание: Я не рекомендую вам использовать важную декларацию, поскольку это нарушает естественный поток ваших правил, используйте соответствующие конкретные селекторы вместо!.

Answer 2

Вы можете использовать !important директиву

Посмотрите: important

Answer 3

CSS interits от родительского элемента, так что идти HTML-дерево из целевого объявления делает объявления, соответствующие структуре HTML:

.foo h2 { color:#000000 } 

.foo .somestyle h2 { color:#ff0000 }