Как сбросить/удалить CSS-стили только для конкретного элемента или селектора?

Проблема

Вам необходимо вставить разметку в HTML документ, и она должна выглядеть определенным образом. Более того, у вас нет прав на этот документ, поэтому вы не можете изменять существующие стили. Вы не знаете, какими могут быть стили, или как они могут измениться в будущем.

Сценарии использования могут возникнуть, когда вы предоставляете отображаемый компонент для неизвестных сторонних сайтов. Примеры таких сценариев:

1. Рекламные теги
2. Создание расширения для браузера, которое вставляет контент
3. Любой тип виджета

Простейшее решение

Поместите всё в iframe. У этого решения есть свои ограничения:

1. Ограничения по кросс-доменному доступу: ваш контент не будет иметь доступа к оригинальному документу. Вы не сможете накладывать контент, изменять DOM и т.д.
2. Ограничения отображения: ваш контент заключен в прямоугольник.

Если ваш контент может уместиться в коробке, вы можете обойти проблему #1, заставив ваш контент создать iframe и явно установить содержание, тем самым избегая данной проблемы, поскольку iframe и документ будут обладать одним доменом.

Решение с помощью CSS

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

Даже когда вы переопределяете, нет гарантии, что более специфичное правило CSS не переопределит ваше. Лучшее, что вы можете сделать в этом случае — сделать ваши правила переопределения как можно более целенаправленными и надеяться, что родительский документ случайно не перекроет их: используйте неясный или случайный ID на родительском элементе вашего контента и добавляйте !important ко всем определениям значений свойств.

Если вы используете Sass в вашей системе сборки, один из способов сделать так, чтобы стили не применялись к определённому элементу во всех основных браузерах, заключается в обертывании всех ваших импортов стилей в селектор :not(), как показано ниже:

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

После этого вы можете добавить класс disable-all-styles на контейнер, и дочерний контент не будет затронут вашими стилями.

<div class="disable-all-styles">
  <p>Ничто в этом блоке не подвержено влиянию моих стилей Sass.</p>
</div>

Конечно, все ваши стили теперь будут предваряться селектором :not(), что выглядит немного неаккуратно, но это работает хорошо.

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

Я бы предложил вам подходить к удалению стилей с элемента в каждом конкретном случае.

Допустим, для SEO вам нужно включить H1 на странице, на которой нет фактического заголовка в дизайне. Вы можете захотеть сделать навигационную ссылку на этой странице H1, но, конечно, не хотите, чтобы эта навигационная ссылка отображалась как огромный H1 на странице.

Что вам нужно сделать, так это обернуть этот элемент в тег h1 и посмотреть, какие стили CSS применяются конкретно к элементу h1.

Допустим, я вижу следующие примененные стили к элементу:

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Теперь вам нужно точно определить стили, применяемые к H1, и убрать их в отдельном классе CSS. Это будет выглядеть примерно так:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Это гораздо чище и не нагромождает ваш CSS случайным набором кода, который вы не понимаете.

Теперь вы можете добавить этот класс к вашему h1:

<h1 class="no-style-h1">
     Заголовок
</h1>

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

<body class='common-styles'>
    <div id='header'>Хочет общие стили</div>
    <div id='container'>Не хочет общих стилей</div>
    <div id='footer'>Хочет общие стили</div>
</body>

После того как я поигрался с CSS reset, и это не дало особых результатов (в основном из-за преемственности правил и сложной иерархии стилей), я решил воспользоваться популярным jQuery, который довольно быстро и, скажем так, немного грязно решил задачу:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

Теперь о том, как плохо использовать JS для работы с CSS 😃 Использование JavaScript для управления стилями может быть не самым лучшим подходом, так как это может привести к потере семантики и увеличению сложности кода. Лучше стараться решать подобные задачи с помощью CSS, например, применяя более специфичные селекторы или используя классы для отдельных элементов. Попробуйте, например, добавить дополнительные классы для тех элементов, которые должны иметь специфические стили, и применить необходимые стили к этим классам. Таким образом, вы сможете избежать вмешательства JS и сохранить чистоту и поддержку кода.

Если кто-то ищет ответ с использованием iframe, вот он:

<iframe srcdoc="<html><body>ваш-html-текст-здесь</body></html>"></iframe>

Дополнительную информацию о поддержке вы можете найти по ссылке: Can I use iframe srcdoc.