Как предотвратить наследование 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.
Как отключить наследование в 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; >