Сброс / удаление стилей CSS только для элемента

для будущих читателей. Я думаю, что это то, что подразумевалось, но в настоящее время не очень широко поддерживается (см. ниже):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• поддержал в (источник): Chrome 37, Firefox 27, IE 11, Opera 24
• не поддерживается: Safari

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

Проблема

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

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

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

Простое Исправление

Поместите все в iframe. Это имеет свой собственный набор ограничений:

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

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

решение CSS

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

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

для этой проблемы найдено совершенно новое решение.

вам нужно "доступно правило css, которое удалит все стили, ранее заданные в таблице стилей для определенного элемента."

Итак, если элемент имеет имя класса, например remove-all-styles:

например:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

С CSS:

  .remove-all-styles {
    all: revert;
  }

сбросить все стили, применяемые other-class, another-class и все остальные унаследованные и примененные стили к этому div.

или в вашем случае:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

будет делать.

здесь мы использовали одно классное свойство CSS с другим классным значением CSS.

1. revert

на самом деле revert, как говорится в названии, возвращает это свойство к нему стиль пользователя или агента пользователя.

1. all

и когда мы используем revert С all свойства, все свойства CSS примененный к этому элементу будет возвращен к стилям user/user-agent.

Щелкните здесь для того чтобы знать разницу между автором, потребителем, типами потребител-агента.

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

.isolated-component {
 all: revert;
}

который вернет все author styles (т. е. разработчик CSS) в user styles (стили, которые a пользователь нашего сайта set-less chance scenario) или к user-agent стили, если не установлены пользовательские стили.

подробнее здесь:https://developer.mozilla.org/en-US/docs/Web/CSS/revert

и только поддержка: только Safari 9.1 и iOS Safari 9.3 поддерживают revert значение на момент написания.

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

другой стороны:

1) Включите код css (файл)Yahoo CSS сброс а затем поместите все внутри этого DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) или используйте http://www.cssreset.com

Я не рекомендую использовать ответ, который был отмечен как правильный. Это огромный blob 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;
    font-family: 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;
}

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

Теперь вы можете добавить этот класс в свой Н1

<h1 class="no-style-h1">
     Title
</h1>

Если вы используете sass в системе сборки, один из способов сделать это, который будет работать во всех основных браузерах, - обернуть все ваши импортные стили с помощью селектора :not ()...

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

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

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

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

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

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

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

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

(теперь расскажите, как плохо использовать JS для борьбы с CSS : -))

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

попробуйте это:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

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

для тех из вас, кто пытается выяснить, как на самом деле удалить стиль только из элемента, не удаляя css из файлов, это решение работает с jquery:

$('.selector').removeAttr('style');

Если вы установите CSS в классах, вы можете легко удалить их с помощью метода jQuery removeClass (). Код ниже удаляет .класс элемента:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

если параметр не указан, этот метод будет удален Все имена классов из выбранных элементов.

любой шанс, что вы ищете !важное правило? Он не отменяет все объявления, но предоставляет способ их переопределения.

"когда !важное правило используется для объявления стиля, это объявление переопределяет любое другое объявление, сделанное в CSS, где бы оно ни находилось в списке объявлений. Хотя !важно не имеет ничего общего со спецификой."

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception

ЛУЧШЕЕ РЕШЕНИЕ

загрузить таблицу стилей" копировать/вставить", чтобы сбросить свойства css по умолчанию (стиль UA):
https://github.com/monmomo04/resetCss.git

Спасибо@Milche Patern!
Я действительно искал значение reset / default style properties. Моей первой попыткой было скопировать вычисленное значение из инструмента browser Dev элемента root (html). Но, как он вычислял, он выглядел бы / работал по-разному на каждом система.
Для тех, кто сталкивается с сбоем браузера при попытке использовать звездочку*, чтобы сбросить стиль дочерних элементов, и, как я знал, что это не сработало для вас, Я заменил звездочку "*" на все имена тегов HTML вместо этого. Браузер не разбился; я на Chrome версии 46.0.2490.71 m.
Наконец, хорошо отметить, что эти свойства сбросят стиль до стиля по умолчанию самого верхнего корневого элемента, но не до начального значения для каждого элемента HTML. Так исправьте это, я взял стили "user-agent" браузера на основе webkit и реализовал его в классе "reset-this".

Загрузите таблицу стилей" копировать/вставить", чтобы сбросить свойства css по умолчанию (стиль UA):
https://github.com/monmomo04/resetCss.git

стиль User-agent:
браузеры по умолчанию CSS для HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

CSS specifity (обратите внимание на спецификацию) :
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

нет, это просто вопрос управления вашей структурой css лучше.

в вашем случае я бы заказал мой css что-то вроде этого:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

просто эксперимент.