Как отменить все стили для элемента css

Как изменить CSS для конкретного элемента

И всё идеально, все такие элементы на всех страницах стали нужного размера. Но а если мне нужно что бы у одного из таких элементов было не 240px, допустим, 150px. Как его обозначить в CSS? Я его нашел, и это

document.querySelector('.test-testOverview-overview .contentSpacing .test-testtOverview-testShelfSpacer .main-gridContainer-gridContainer') 

Как его записать в CSS?

Отслеживать

14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак

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

Я уверен, что это, должно быть, было упомянуто/задано раньше, но искали возраст без везения, моя терминология должна быть неправильной! Я смутно помню твиты, которые я видел некоторое время назад, которые предположили, что существует правило css, которое удалит любые стили, ранее установленные в таблице стилей для определенного элемента. Хорошим примером использования может быть сайт Mobile-first RWD, где большая часть стиля, используемого для определенного элемента в представлениях с малым экраном, требует «сброса» или удаления для того же элемента в представлении рабочего стола. Правило css, которое может достичь чего-то вроде:

.element

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

/* 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; >> 

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

matt_50 09 апр. 2013, в 12:54
Поделиться

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

CBroe 09 апр. 2013, в 11:53
Способ сделать это состоит в том, чтобы ограничить это в первую очередь медиа-запросами
Kevin Lynch 09 апр. 2013, в 11:58
Milche Patern 09 апр. 2013, в 13:06
Спасибо за все предложения — я думаю, что я мечтал об этом волшебном правиле сброса!
matt_50 09 апр. 2013, в 18:31

Существует свойство называется all , что предлагается для сброса всех свойств CSS для данного элемента в некоторые CSS шириной значений — значение , которое вы хотите использовать будет unset с unset , который сбрасывает свойство либо унаследованное значение , если он наследует по умолчанию или иначе, его начальное значение. Нет слов о реализации, но приятно знать, что кто-то об этом думал.

BoltClock♦ 30 апр. 2014, в 04:58
Вот твит 2015 года на этот счет: twitter.com/LeaVerou/status/577390241763467264
Dan Dascalescu 06 сен. 2015, в 07:30
Есть забавная опечатка «Eaxmple Использование:», улыбаясь мне.
Milche Patern 16 окт. 2015, в 03:31
all: revert сделаю. Смотри мой ответ. @CBroe Да, такая вещь существует сейчас.
Asim K T 28 март 2016, в 06:06
Показать ещё 6 комментариев
Поделиться:

14 ответов

Лучший ответ

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

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

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

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

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 для где 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; 

Milche Patern 09 апр. 2013, в 14:58
Поделиться

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

user566245 18 фев. 2014, в 11:13

@ user566245 Применение этого с * селектором убьет ваш браузер и котенка. Это НЕ настоящий сброс. Истинного сброса просто не существует.

Milche Patern 18 фев. 2014, в 16:48

@Milkywayspatterns LOL, вы, вероятно, правы. Для меня я взял только те атрибуты, которые хотел сбросить, и применил к «div # theid *». Надеюсь, это никого не убьет, котенок 🙂

user566245 19 фев. 2014, в 02:00

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

Jeremy 20 март 2014, в 16:36
@ Джереми хум дисплей: нормально? Ты имеешь в виду наследственное ??
Milche Patern 25 март 2014, в 15:30

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

BoltClock♦ 30 апр. 2014, в 04:52

ctrl+F (найти / заменить) -> ввести «:» (пробел: пробел) -> заменить на: «:» (: пробел) -> заменить все . Другими словами, было бы хорошо для пользователей, которые могли бы использовать это, чтобы не было пробелов перед двоеточием, которое является более стандартным форматированием для CSS. Не раскалывать волосы или что-то еще.

Yes Barry 05 июль 2014, в 07:11

@mmmshuddup Спасибо за совет. Если вы посмотрите на оригинальный ответ, я изменил его как CSS. Что касается сжатия, то это ответ, а не патч копирования-вставки. Не так ли?

Milche Patern 07 июль 2014, в 13:29
Вы можете использовать свойство all , которое поддерживается всеми современными браузерами .
Dan Dascalescu 06 сен. 2015, в 07:31

@DanDascalescu будьте осторожны со вставленным копией заявлением от LeaVerou .. ЭТО НЕ поддерживается всеми современными браузерами. Вернитесь на сайт developer.mozilla.org/en-US/docs/Web/CSS/all и ознакомьтесь с содержанием «Совместимость браузера» внизу страницы. Смотрите: caniuse.com/#search=all

Milche Patern 08 сен. 2015, в 14:59
Я думаю, вам не нужно устанавливать margin-top когда вы уже установили margin и т. Д.
KeepMove 24 сен. 2015, в 08:46

@SoursopTree Вы правы в отношении сокращения, удваивающего определенный атрибут. Моя цель состояла в том, чтобы сделать его исчерпывающим и полным для понимания, а не для блока кода копирования-вставки.

Как отменить все стили для элемента css

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

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

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

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

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

12 ответов

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

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

• Добавьте репозиторий github с декабрь 2017 года более подробным списком
• Похожие
• Связано с MDN
• Связанные спецификации W3C

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

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

[POST EDIT 4 февраля ’17] Голосовал за то, что стал современной нормой, пользователь Joost

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

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

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

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

ответил 9 и 13 февраля в 20:15 VisioN

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

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

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

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

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

Проблема

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

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

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

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

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

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

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

Решение CSS

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

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

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

Вам необходимо «Доступно правило css, которое удалит все стили, ранее установленные в таблице стилей для определенного элемента.»

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

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

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

revert литий>

all литий>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14 ответов

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

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

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

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

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

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

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

никто не думал, кроме css, чтобы сбросить css? Да?

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

ответил 9 февраля ‘ 13 в 20: 15 по VisioN

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

для сравнения, вот Firefox 40.0 список значений здесь font-style: oblique запускает операцию DOM.

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

• поддержал в (источник): 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 :

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

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

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

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

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

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

Как отменить действие всех стилей в рамках одного div

Как в документе отменить автоматическое обновление ВСЕХ стилей?
У меня проблема — работаю с документами, над которыми трудилось до этого очень много людей и в.

Как отменить следующие действие
Через Form1 вызывается Form2, после закрытия Form2 выполняется действие. На Form2 есть button1 и.

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

Сообщение от vlaik

all: initial; не работает в ie. Если нужен ie то кто-то предлагает это:

Вот только я не понимаю зачем все дублировать миллион раз, если известно, что сокращенные свойства сбрасывают все иные применяемые свойства данного значения до initial — значения браузера по умолчанию. Нпример можно просто написать background: none ; или border: none; и он сбросит все их стили сам

Например border: none; в браузере ведет себя как

Как отменить действие стиля?
В главном html таблица красится через tbody tr:nth-child(odd) Присоединяю по событию другой html и.

Как отменить действие макроса
Добрый день, есть большой макрос, который выполняет с текстом множество операций. Существует ли.

Отменить действие как в блокноте
как мне отменить действие как в блокноте??

Как отменить действие макроса UNICODE?
#undef UNICODE не работает. Но всё по порядку. Друзья! Недавно качнул один из компиляторов.

Как отменить последнее действие в DataGridView1
Как прописать возможность отмены последнего действия в DataGridView1 средствами visual basic net

Как отменить действие утилиты sysprep?
Использовал эту утилиту для подготовки системы к клонированию и она перестала быть пригодной для.

Как мне отменить свойство CSS?

К странице, над которой я работаю, прикреплено много разных файлов CSS: boostrap.css, master.css и custom.css.

Я пытаюсь удалить свойство, так как не хочу, чтобы в ссылке в меню было свойство a: hover. Главный файл CSS имеет

CSS-файл начальной загрузки имеет

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

Итак, два вопроса: каково значение по умолчанию для свойства цвета (похоже, его нет)? Есть ли более простой способ сделать это без перезаписи файлов ядра?

5 ответов

Вы можете использовать color: inherit , чтобы цвет использовал значение от его предков. color необычен тем, что он имеет разные значения по умолчанию в зависимости от контекста. Например, ссылка по умолчанию будет иметь синий цвет, а текст по умолчанию — черный.

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

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

Лучше всего создать более конкретное правило CSS, например:

Специфика — это важная концепция CSS, описанная в этой статье:

Я бы порекомендовал попробовать:

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

Чтобы отменить свойство, вы можете использовать ключевое слово unset .

Итак, в вашем собственном файле css вы можете сделать что-то вроде следующего: —

Ключевое слово CSS unset сбрасывает свойство до его унаследованного значения, если оно наследуется от своего родителя, и до его initial value , если нет. Другими словами, он ведет себя как ключевое слово inherit в первом случае и как ключевое слово initial во втором случае. Его можно применить к любому свойству CSS, включая сокращение all.

Каждый стиль CSS имеет естественное значение по умолчанию. Просто не всегда none .

Некоторые могут быть 0 (как в нуле).

Некоторые могут быть auto .

Иногда inherit — лучший вариант.

Цвета можно установить на transparent .

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

Похожие публикации:

1. Как сделать плавный hover в css
2. Как сделать прицел меньше в css v34
3. Как сделать прямоугольник с закругленными краями в css
4. Как сделать расстояние между картинками css

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

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

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

Постановка проблемы: в большинстве случаев кнопки по умолчанию, предоставляемые веб-браузерами, очень мягкие и не стилизованы. Чтобы сделать его более стилизованным и вписаться в тему веб-страницы, его можно стилизовать вручную с помощью CSS. Но ручные стили нельзя применять, пока не будут удалены стили по умолчанию. Следовательно, мы применяем следующий код, чтобы удалить стили по умолчанию, присутствующие на кнопке.

Пример 1: Здесь вы увидите, как использовать свойство unset в HTML и CSS. В этом примере удаляется только стиль браузера по умолчанию.