CSS стили переопределяют стили встраиваемых HTML

Question

Я встраиваю GitHub Gist на страницу. Однако все стили страницы переопределяют стили встроенного заголовка и текста. Смотрите фрагмент для примера:

h1 { color: blue; }
p { color: red; }

<h1>An example header!</h1>
<p>here's some text</p>
<script src="https://gist.github.com/dochoffiday/333a22e937f7503cd770ed70a429df23.js"></script>

В приведенном выше примере я не хочу, чтобы заголовок становился синим или текст становился красным во встроенной сущности. Что я могу сделать здесь, чтобы мои стили не испортили стили, импортированные суть?

Answer 1

Суть вводится в ваш DOM, поэтому, естественно, он наследует стили документа. Вы можете «охватить» свои CSS классы, но это не совсем простой способ для go, если у вас много контента. * ниже), вы можете убедиться, что классы применяются только к потомкам .content.

.content h1 { color: blue; }
.content p { color: red; }

<div class="content">
    <h1>An example header!</h1>
    <p>here's some text</p>
</div>
<script src="https://gist.github.com/dochoffiday/333a22e937f7503cd770ed70a429df23.js"></script>

К сожалению, вы не можете просто использовать :not(.gist) h1 или :not(.gist) p, потому что технически все элементы между введенным блоком .gist и его h1 / p не классифицируется как .gist, поэтому селектор оценивается как true.