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

Я уверен, что об этом уже говорилось / спрашивалось, но я искал возраст без удачи, моя терминология, должно быть, неверна!

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

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

Правило CSS, которое может достичь чего-то вроде:

.element {
  all: none;
}

Пример использования:

/* 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: none;
  }
}

Таким образом, мы можем быстро удалить или переустановить стиль без необходимости объявлять каждое свойство.

Имеет смысл?

Ключевое слово CSS3 initialустанавливает для свойства CSS3 начальное значение, определенное в спецификации . initialКлючевое слово имеет широкую поддержку браузера для семей IE и Opera Mini за исключением.

Поскольку отсутствие поддержки IE может вызвать проблемы, вот некоторые из способов, которыми вы можете сбросить некоторые свойства CSS до их начальных значений:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• Relevent GitHub репо с декабря 2017 года более исчерпывающий список
• связанные с
• Связанные с MDN
• Связанные спецификации W3C

Как упомянуто в комментарии @ user566245:

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

[POST EDIT FEB 4, '17] Признан за то, что стал современной нормой, пользователь Joost

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

ПРИМЕР ОТ W3

Например, если автор указывает элемент all: initial для элемента, он блокирует все наследование и сбрасывает все свойства, как если бы не было правил на уровне автора, пользователя или агента пользователя в каскаде.

Это может быть полезно для корневого элемента «виджета», включенного в страницу, который не хочет наследовать стили внешней страницы. Однако обратите внимание, что любой стиль «по умолчанию», примененный к этому элементу (такой как, например, display: block из таблицы стилей UA для таких элементов блока, как), также будет удален.

ЯВАСЦРИПТ?

Никто не думал о чем-то кроме css для сброса css? Да?

Вот этот фрагмент полностью актуален: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") вернет все элементы из DOM. Затем вы можете установить стили для каждого элемента в коллекции:

ответил 9 Фев '13 в 20:15 VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

Со всем этим сказано; я не думаю, что сброс css является чем-то выполнимым, если только у нас не останется только один веб-браузер ... если в конце браузер установит 'default'.

Для сравнения, вот список значений Firefox 40.0 для <blockquote style="all: unset;font-style: oblique">где font-style: obliqueзапускает DOM-операцию.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

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

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

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

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

Используйте all: revertили all: unset.

От MDN:

Ключевое слово revert работает точно так же, как unset во многих случаях. Единственное отличие заключается в свойствах, значения которых устанавливаются браузером или пользовательскими таблицами стилей, созданными пользователями (устанавливаемыми на стороне браузера).

Вам необходимо «Доступное правило 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, как следует из названия, это свойство возвращается к стилю пользователя или агента пользователя.

2. all

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

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

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

.isolated-component {
 all: revert;
}

Который будет возвращать все author styles(т. Е. CSS разработчика) к user styles(стили, которые установил пользователь нашего сайта - менее вероятный сценарий) или к user-agentсамим стилям, если пользовательские стили не установлены.

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

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

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

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

Проблема

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

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

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

Самое простое исправление

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

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

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

Решение CSS

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

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

другие способы:

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

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

2) или использовать

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

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

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

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

<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 (), так что это немного странно, но работает хорошо.

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

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

.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 по умолчанию (стиль UA):
https://github.com/monmomo04/resetCss.git

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

Загрузите таблицу стилей «копировать / вставить» для сброса свойств CSS по умолчанию (стиль UA):
https://github.com/monmomo04/resetCss.git

Стиль пользовательского агента:
CSS браузеров по умолчанию для элементов HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

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

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

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

<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 :-))

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

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

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

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

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

Нет, это просто вопрос лучшего управления структурой 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}
}

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

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

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

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