Как можно предотвратить распространение стилей на все вложенные элементы?

#css

Как предотвратить распространение стилей на все вложенные элементы?

.extend_test{
    background: #972b2b;
    color: slateblue; 
}





    тест extend 1
    

        тест extend 2
    
  
 

    

Ответы

Ответ 1

Единственный способ — это сбрасывать отнаследованные значения на потомках на значения
по умолчанию, которые могут варьироваться от браузера к браузеру.  


  Применение CSS к документам HTML основано на принципах наследования
  и каскадирования. Википедия.


Ответ 2

Ждём all с revert'ом:

all: revert;


Теоретически, на данный момент поддержка только у Safari 9+ (и то не всех).
С чуть более хорошей поддержкой initial:

all: initial;


Поддержка FF27+, Chrome 37+.
Из-за all отпадает Edge 12+ и более старые версии Хрома и FF.

К тому же, там несколько неожиданные эффекты наблюдаются.
Shadow dom сам по себе изолирует стили.
На данный момент самый нормальный способ - явно переопределять стили.
Можно было бы предложить комитету !noinherit по аналогии с !important :)