Versandtermin

Отменить наследование (сбросить) стиль CSS определенного элемента?

Хорошо, у меня красивая сеть, с ее стилями внутри CSS и всего Но теперь я нашел проблему, я хочу, чтобы ОДИН список был девственным, без наследуемого стиля. Я знаю, что могу сделать это, просто давая ему style=»(. )» , чтобы он перезаписывал унаследованный стиль, но есть ли какая-либо инструкция/трюк/что-то сделать, не делая этого?

@SamWarren «Как исправить ранее примененный переусердствующий селектор?» 🙂 Во всяком случае, можно также использовать !important вещи, но все равно придется вручную сбросить для различных свойств.

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

Что касается того, зачем нам это нужно, часто из Twitter Boostrap идет 50 000 строк мусора и тому подобное, слои за слоями мусора (вспомним темы Envato).

4 ответа

спецификация CSS Cascading и Inheritance Level 3 предоставляет возможность reset всем свойствам сразу. Это достигается с помощью сокращенного свойства all со значением initial или unset в зависимости от того, нужно ли вам reset унаследованные свойства.

Обратите внимание, что они не имеют никакого отношения к значениям по умолчанию для браузеров.

Эта функция доступна в Firefox 27+, Chrome 37+ и Opera 24 +.

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

/* Global styles for UL lists. */ UL /* Styles for UL lists inside content block. */ .content UL

Вы хотели сказать «сбросить свойства CSS на их значения по умолчанию для браузера»? Начальные значения имеют initial ключевое слово, но оно отличается от настроек браузера по умолчанию.

Это не решает случай, когда начальное значение является «унаследованным», например, с фоном. Нет способа «сбросить» цвет фона div на тот, который был бы на пустой странице. Другими словами, песочница невозможна.

, и т.д.) Всегда выглядели так, как будто они не были разработаны независимо от того, какой элемент/его родительский элемент.

В вашем случае, я думаю, вы можете только перезаписать наследуемые стили, как вы упомянули, с атрибутом inline-style или с помощью !important или даже лучше, создайте класс .reset :

Все упомянутые выше решения имеют свои недостатки, поэтому вам нужно выбрать битву.

Источник

Наследование (inherit initial unset) | CSS

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

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

CSS наследование стилей от родителя: inherit

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

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF;">100%
 

width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF;">inherit
 

Пример 2: max-height: 100%; не работает

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: 100%; height: 4em; background: #E6E2FF;">100%
 

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: inherit; height: 4em; background: #E6E2FF;">inherit
 

Пример 3: как сделать дубликат стилей CSS родителя

  
У меня та же максимальная ширина, фон, рамка и другое, что у родителя
 

inherit переносит значение непосредственного родителя, а не определённого position

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF; position: absolute;">100%
 
 

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF; position: absolute;">inherit
 
 

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

 
без установленного display 

 
display: inherit; background: #E6E2FF;">inherit 

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial

Пример 1: запретить наследование свойства

  
color: initial;
 

Пример 2: убрать свойство для более узкого селектора

 .raz < color: red; /* наследуется */ font-size: 200%; /* наследуется */ > .raz0 .raz 
Я сам по себе
 
У меня есть родитель "raz0"
 

initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

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

  
<div> 
не будет блочным
 

unset CSS: сбросить стиль браузера

Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial , блочные элементы станут inline .

Пример: обнулить все возможные стили input

 label < text-shadow: 1px 1px rgba(255,0,180,0.5); >input Изменить текст: 

Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана 🙂

5 комментариев:

Анонимный Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/

Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы Анонимный Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.

Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный Спасибо Нашёл.
vertical-align: с display:inline; и display:inline-block;

Даа. Как всё это забавно.
NMitra И почему при display:inline margiņ-top не работает? — Потому что он не блочный, у него нет высоты height

Источник

Как отключить наследование в css?

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

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Обсуждения

Всем привет, нужно было написать хтмл код для онлайн шопа где прописывалось бы время когда можно забрать товар. сразу скажу с кодом я даже не на ВЫ. Этот код мне сделал чатжопати и все вроде бы работает кроме скрипта с выходными. Если сегодня (после 16 часов) или завтра один отпускных дней, то должна выплюнуться дата след. свободного дня. Но он как то этот момент игрнорирует. Заранее благодарю!

Versandtermin

Angestrebter Versand- / Abholtermin:

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

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

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

Источник

как отменить каскадирование или наследование

Привет!
Создал плагин для вордпресс и вывожу таблицу через шорткод в клиентской части, к таблице применяю класс свой и ему задаю стили и эти стили не работаю их перекрывают стили самой темы.
Как сделать чтобы например было блок любой html не наследувал стили от других классов.
Нада такой стиль написать чтобы отображалась таблица одинаково во всех темах, а не так что от каждой темы стили перекрывают все мои стили
Я использовал !important тогда работает свойство мое, а если в теме будут куча свойств что в моем стиле не определены, мне что нужно все стили что есть определять и ставить !important чтобы не перекрывались? Как правильно сделать и отменить каскадирование или как оно называется наследование?

.entry-content th, .comment-content th { font-weight: 700; padding: 8px; text-transform: uppercase; }

.tab th{ /*all:unset;*/ /*!important;*/ border:0px; background: #34495E; color: #ecf0f1; padding: 20px; font-size:16px; }

p>This text is red. p> div class="foo"> p>This text is also red. p> div> div class="bar"> p>This text is green (default inherited value). p> div> 

.foo < color: blue; > .bar < color: green; > p < color: red; > .bar p < color: unset; >

p>This text has a red border. p> div> p>This text has a red border. p> div> div class="bar"> p>This text has a black border (initial default, not inherited). p> div> 

div < border: 1px solid green; > p < border: 1px solid red; > .bar p < border-color: unset; >