Css запретить наследование стилей

Как предотвратить наследование css

Ниже приведен пример кода кода, который я использую. У меня есть два набора css и вы хотите применить к двум компонентам UL. однако результат получается, внутренний «UL» будет содержать часть css, определенную для ее родителя. и даже некоторые из css, определенные в «b», будут отменены «a». ночным кошмаром.

как я могу остановить наследование.

.moduleMenu-ul < width: 100%; height: 43px; background: #FFF url("../images/module-menu-bg.gif") top left repeat-x; font-weight: bold; list-style-type: none; margin: 0; padding: 0; >.moduleMenu-ul .moduleMenu-li < display: block; float: left; margin: 0 0 0 5px; >.moduleMenu-ul .moduleMenu-li a

.moduleMenu-ul.moduleMenu-li a: hover

.moduleMenu-ul .moduleMenu-li a.current < color: #FFF; background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x; padding: 5px 15px 0; >#extraModuleMenuOptions < z-index:99999; visibility:hidden; position:absolute; color:#FFFFFF; background-color:#236FBD; >#extraModuleMenuOptions .flow-ul < text-align:left; >#extraModuleMenuOptions .flow-ul .flow-li < display:block; >#extraModuleMenuOptions .flow-ul .flow-li .flow-a

ОТВЕТЫ

Ответ 1

скажет, что у вас есть это:

Теперь, если вам не нужна совместимость с IE6 (ссылка Quirksmode), вы можете иметь следующий css

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

Ответ 2

Если внутренний объект наследует свойства, которые вам не нужны, вы всегда можете настроить их на то, что вы хотите (т.е. — каскадные свойства, и поэтому их можно перезаписать на более низком уровне).

В этом случае «li-b» будет по-прежнему выделен полужирным шрифтом, даже если вы этого не хотите. Чтобы сделать это не жирным, вы можете:

Ответ 3

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

Ответ 4

Наследуемые элементы должны иметь установленные стили по умолчанию.
Если родительский класс устанавливает стиль color:white и font-weight:bold , то ни один унаследованный ребенок не должен устанавливать в своем классе «цвет: черный» и font-weight: normal . Если style не задано, элементы получают свой стиль от своих родителей.

Ответ 5

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

 
  
Blue text blue text! this shouldn't be blue 
 
 
 
Blue text! blah 
 
 

Невозможно заставить класс .notBlue вернуться к родительскому стилю. Лучшее, что вы можете сделать, это следующее:

.red, .red .notBlue < color: red; >.green, .green .notBlue

Ответ 6

Использование подстановочного знака * selector в CSS для переопределения наследования для всех атрибутов элемента (путем их возврата в исходное состояние).

Ответ 7

Отменить значения, присутствующие во внешнем UL со значениями во внутреннем UL.

Ответ 8

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

Источник

Наследование (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 ответа на этот вопрос

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

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

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

Обсуждения

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

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

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

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

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

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник

unset

В не unset , CSS ключевого слово сбрасывает свойство его наследуемое значение , если свойство естественно наследует от своих родителей, и к его исходному значению , если нет. Другими слова, он ведет себя как inherit ключевое слово в первом случае, когда свойство является унаследованным свойством , и как initial ключевым слово , во втором случае, когда свойство является ненаследуемым свойством .

unset может применяться к любому свойству CSS, включая сокращенное свойство CSS all .

Examples

Color

color является наследуемым свойством.

HTML

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> 

CSS

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

Result

Border

border не является наследуемым свойством.

HTML

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> 

CSS

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

Result

Specifications

Источник

unset

В не unset , CSS ключевого слово сбрасывает свойство его наследуемое значение , если свойство естественно наследует от своих родителей, и к его исходному значению , если нет. Другими слова, он ведет себя как inherit ключевое слово в первом случае, когда свойство является унаследованным свойством , и как initial ключевым слово , во втором случае, когда свойство является ненаследуемым свойством .

unset может применяться к любому свойству CSS, включая сокращенное свойство CSS all .

Examples

Color

color является наследуемым свойством.

HTML

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> 

CSS

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

Result

Border

border не является наследуемым свойством.

HTML

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> 

CSS

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

Result

Specifications

Источник