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

Ответ 1

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;
    }
}

• Релевантный github-репо с декабрем 2017 года более убедительный список
• связанные с
• Относится к MDN
• Связанные спецификации W3C

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

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

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

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

ПРИМЕР ИЗ W3

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

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

JAVASCRIPT?

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

Существует такая неотложная утилита: fooobar.com/questions/24564/...

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 является чем-то выполнимым, если мы не закончим только с одним веб-браузером. Если в конце "браузер" будет установлен "по умолчанию".

Для сравнения здесь приведен список значений 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;

Ответ 2

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

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

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

Ответ 3

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

Проблема

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

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

• Тег объявления
• Создание расширения браузера, который вставляет содержимое
• Любой вид виджета

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

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

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

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

Решение CSS

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

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

Ответ 4

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

Вам нужно "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, применяемые к этому элементу, будут возвращены к стилям пользователя/пользователя-агента.

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

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

.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 значения на момент написания.

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

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

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

Ответ 8

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

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

Ответ 9

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

Попробуйте следующее:

.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. */
    }
}

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

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

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

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

Ответ 13

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

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

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

Загрузите таблицу стилей "копировать/вставить" в свойства reset 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

Ответ 14

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

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