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

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

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

10 ответов

пока нет родительских селекторов (или как Шон Инман называет их, квалифицированные селекторов), поэтому вам придется применить стили к дочерним элементам списка, чтобы переопределить стили в родительских элементах списка.

каскадирование-это своего рода весь смысл каскадных таблиц стилей, отсюда и название.

вы либо используете дочерний селектор

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

в противном случае вы можете использовать

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

есть свойство под названием all на С помощью CSS3 наследования модуль. Он работает следующим образом:

по состоянию на 2016-12, все браузеры, кроме IE / Edge и Opera Mini поддержка этого свойства.

можно использовать * селектор изменить стили ребенка обратно в значение по умолчанию

упаковка с iframe делает Родительский css устаревшим.

короткий ответ: Нет, невозможно предотвратить наследование CSS. Можно переопределить только стили, заданные для родителей. См. спецификацию:

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

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

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

вы можете использовать что-то вроде jQuery для «отключения» этого поведения, хотя я вряд ли думаю, что это хорошее решение, поскольку вы получаете логику отображения в css и javascript. Тем не менее, в зависимости от ваших требований вы можете найти CSS utils jQuery, чтобы облегчить вам жизнь, чем пытаться взломать css, особенно если вы пытаетесь заставить его работать для IE6

например, если у вас есть два div в документе XHTML.

затем попробуйте это в CSS.

влияет только див2 пункте.

влияет только див1 пункте.

вам не нужна ссылка на класс для li s. Вместо того, чтобы иметь CSS, как

просто установите их обратно по умолчанию в селекторе «# sidebar ul li»

Источник

enepomnyaschih

Супер-пупер школа программирования

Исследование идеального UI Framework’а, программирование игр, веб-программирование, задачи и решения

Один мой хороший друг и коллега Юра Поздняков ( ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: «Ха! Так это ж очевидно!» Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.

О наследовании CSS

Вот пример, который полностью перевернул мое представление о CSS:

Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?

Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:

Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)

Решение

Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

2. Ни один CSS-селектор не должен содержать записи вида #myid

3. Правильно именовать классы

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

Это гарантирует, что все классы имеют уникальные имена.

4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit

Тем самым мы избавились от проблемы наследования. Мы объявили правила наиболее низкого приоритета, которые гарантируют, что непредсказуемого наследования стилей не будет. Если же вам хочется, чтобы какой-то стиль у некоторого компонента унаследовался от родителя, объявите его отдельно:

5. Все остальные селекторы строятся только из классов и псевдоклассов

Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:

Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

Важно! Не допускайте селекторов вида:

6. (опционально) Для компонентов определить стили по умолчанию

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

Заключение

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

Источник

Каскад и наследование

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

Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.

Конфликтующие правила

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово «каскадные» является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.

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

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

Каскад

Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.

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

Специфичность

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1 <. >, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

Позже мы объясним, как сделать оценку специфичности, и прочие детали.

Наследование

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

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

Некоторые свойства не наследуются — например, если вы установили для элемента width равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

Примечание: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.

Понимание взаимодействия этих концепций

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

Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:

Понимание наследования

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

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

Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

Примечание: Смотрите Origin of CSS declarations в [Page not yet written] для более подробной информации о каждом из них, и о том, как они работают.

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

Возврат всех исходных значений свойств

В примере ниже имеются два блока

Попробуйте установить для all ещё одно из доступных значений и исследуйте, в чём заключается разница.

Понимание каскада

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

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

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

Порядок следования

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

Специфичность

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

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

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

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

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

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

Примечание: Универсальный селектор (*), комбинаторы (+, >,

, ») и псевдокласс отрицания (:not) не влияют на специфичность.

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

Прежде чем мы продолжим, давайте посмотрим на пример в действии.

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

Примечание: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, миллион соединённых селекторов класса не способны переписать правила одного селектора id.

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

!important

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

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.

Влияние расположения CSS

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

Подведение итогов

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними :

Проверьте ваши навыки

Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.

Что дальше?

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

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

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

Источник

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

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

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

.moduleMenu-ul.moduleMenu-li a: hover

ОТВЕТЫ

Ответ 1

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

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

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

Надеюсь, что это поможет

Ответ 2

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

Ответ 3

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

Ответ 4

Ответ 5

Возьмите пример ниже:

Ответ 6

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

Ответ 7

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

Ответ 8

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

Источник

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

Хорошо, у меня красивая сеть, с ее стилями внутри CSS и всего

Но теперь я нашел проблему, я хочу, чтобы ОДИН список был девственным, без наследуемого стиля.

4 ответа

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

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

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

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

,

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

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

Вы можете попробовать http://cleanslatecss.com/ полностью reset целевой элемент, это только css, no js, ​​вам просто нужно добавить класс для цели, и все это сделано.

Тень DOM

Функция Теневой DOM v1 в настоящее время (постоянно подлежит изменению) имеет растущую поддержку, предлагая множество возможности, включая CSS с CSS.

Сбрасывает самую полезную функцию теневого DOM с областью CSS:

В результате получается стилистически изолированное содержимое.

Источник