Как игнорировать родительский стиль css
Мне интересно, как игнорировать родительский стиль и использовать стиль по умолчанию (нет). Я покажу свой конкретный случай в качестве примера, но я уверен, что это общий вопрос.
#elementId select - Я не могу редактировать таблицу стилей, в которой установлен «#elementId select», мой модуль не будет иметь к ней доступа.
- Желательно не переопределять стиль высоты с помощью атрибута стиля.
Например, используя firebug, я могу отключить родительский стиль, и все в порядке, это эффект, которого я добиваюсь.
После того, как стиль установлен, можно ли его отключить или его необходимо переопределить?
10 ответы
Это должно быть переопределено. Вы можете использовать:
Убедитесь, что вы используете !important флаг в стиле css, например margin-top: 0px !important Что означает! Important в CSS?
Вы можете использовать селектор атрибутов, но поскольку он не поддерживается устаревшими браузерами (читайте IE6 и т. д.), лучше добавить имя класса
Я продолжаю ворчать, говоря Вам следует избегать !important где вы можете — Якоб Шнайдер
Вы можете отключить его, переопределив его следующим образом:
Я бы не советовал использовать !important в вашей производственной разметке — его действительно следует использовать только при отладке. — дружный
@Amicable, можете ли вы объяснить, почему это не рекомендуется? — felipe_gdr
@pipo_dev есть много статей в Интернете, которые могли бы объяснить это лучше, чем я, в комментариях и с примерами. В двух словах, это хак. В 99% случаев он используется в качестве правильного исправления, которое привело бы к лучшему и более удобному в сопровождении CSS. Некоторые допустимые варианты использования !important включать служебные классы и хаки обратной совместимости для старых браузеров, таких как IE7 — дружный
не работает. пагнация — это последний td в таблице. .detailTable td < ширина: 50%; >.pagnation < ширина: 100% !важно; >— Филип Рего
Я не согласен с @Amicable. На самом деле нет альтернативы использованию !important когда вы застряли с родительской темой, которую вы не можете контролировать, но все же хотите переопределить. — Джастин Скилс
Это было поднято наверх из-за редактирования . Ответы немного устарели и не так полезны сегодня, поскольку в стандарт было добавлено другое решение.
Теперь есть сокращенное свойство all.
Это устанавливает все свойства css в их начальное значение. внимание некоторые начальные значения наследуются; В результате некоторое форматирование все еще происходит в элементе.
Из-за этой паузы, необходимой при чтении кода или его просмотре в будущем, не используйте его, если только вы не очень, поскольку процесс обзора является точкой, где могут быть сделаны ошибки / ошибки! при редактировании страницы. Но очевидно, что если есть большое количество свойств, которые необходимо сбросить, то «все» — это то, что нужно.
Я создаю модальные блокирующие веб-сайты, это было решение для моих HTML-тегов, которые не перезаписывались стилями веб-сайтов. — Лукас Андраде
вы можете создать другое определение ниже в таблице стилей CSS, которое в основном меняет исходное правило на противоположное. вы также можете добавить «!важно» к указанному правилу, чтобы убедиться, что оно придерживается.
Вы должны использовать это
У меня была похожая ситуация, когда я работал над сайтом Joomla.
Добавлено имя класса для затрагиваемого модуля. В твоем случае:
затем сделал следующее однострочное изменение в css. Добавлена строка
Если я правильно понял вопрос: вы можете использовать auto в CSS так width: auto; и он вернется к настройкам по умолчанию.
Для CSS имело бы смысл просто добавить дополнительный стиль (например, в раздел заголовка вашей страницы, который бы переопределял связанную таблицу стилей), такой как этот:
и отключите все ранее примененные стили, но нет способа сделать это. Вам придется переопределить атрибут высоты и установить для него новое значение в разделе заголовка ваших страниц.
См. ниже машинописный текст для повторного применения класса css к элементу, чтобы переопределить стили css родительского контейнера (обычно компонента фреймворка) и принудительно применить свои пользовательские стили. Платформа вашего приложения (будь то angular/react, вероятно, делает это, поэтому родительский контейнер css был повторно применен, и ни один из ваших ожидаемых эффектов в css-class-name не отображается для вашего дочернего элемента. Call this.overrideParentCssRule(childElement, ‘ css-class-name’); чтобы сделать то, что только что сделал фреймворк (вызвать это в document.ready или обработчике конца события):
overrideParentCssRule(elem: HTMLElement, className: string) < let cssRules = this.getCSSStyle(className); for (let r: number = 0; r < cssRules.length; r++) < let rule: CSSStyleRule = cssRules[r]; Object.keys(rule.style).forEach(s => < if (isNaN(Number(s)) && rule.style[s]) < elem.style[s] = rule.style[s]; >>); > > Можете ли вы объяснить, почему для такого простого требования следует использовать машинописный текст? — Нико Хаасе
Существует множество значений, которые можно использовать для отмены правил CSS: начальное, неустановленное и откатное. Более подробная информация от Рабочей группы CSS в W3C:
Поскольку это «черновик», не все из них полностью поддерживаются, но неустановленные и начальные значения поддерживаются в большинстве основных браузеров, поэтому revert имеет меньшую поддержку.
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
Как игнорировать родительский стиль css
Мне интересно, как игнорировать родительский стиль и использовать стиль по умолчанию (нет). Я покажу свой конкретный случай в качестве примера, но я уверен, что это общий вопрос.
#elementId select - Я не могу редактировать таблицу стилей, в которой установлен «#elementId select», мой модуль не будет иметь к ней доступа.
- Желательно не переопределять стиль высоты с помощью атрибута стиля.
Например, используя firebug, я могу отключить родительский стиль, и все в порядке, это эффект, которого я добиваюсь.
После того, как стиль установлен, можно ли его отключить или его необходимо переопределить?
10 ответы
Это должно быть переопределено. Вы можете использовать:
Убедитесь, что вы используете !important флаг в стиле css, например margin-top: 0px !important Что означает! Important в CSS?
Вы можете использовать селектор атрибутов, но поскольку он не поддерживается устаревшими браузерами (читайте IE6 и т. д.), лучше добавить имя класса
Я продолжаю ворчать, говоря Вам следует избегать !important где вы можете — Якоб Шнайдер
Вы можете отключить его, переопределив его следующим образом:
Я бы не советовал использовать !important в вашей производственной разметке — его действительно следует использовать только при отладке. — дружный
@Amicable, можете ли вы объяснить, почему это не рекомендуется? — felipe_gdr
@pipo_dev есть много статей в Интернете, которые могли бы объяснить это лучше, чем я, в комментариях и с примерами. В двух словах, это хак. В 99% случаев он используется в качестве правильного исправления, которое привело бы к лучшему и более удобному в сопровождении CSS. Некоторые допустимые варианты использования !important включать служебные классы и хаки обратной совместимости для старых браузеров, таких как IE7 — дружный
не работает. пагнация — это последний td в таблице. .detailTable td < ширина: 50%; >.pagnation < ширина: 100% !важно; >— Филип Рего
Я не согласен с @Amicable. На самом деле нет альтернативы использованию !important когда вы застряли с родительской темой, которую вы не можете контролировать, но все же хотите переопределить. — Джастин Скилс
Это было поднято наверх из-за редактирования . Ответы немного устарели и не так полезны сегодня, поскольку в стандарт было добавлено другое решение.
Теперь есть сокращенное свойство all.
Это устанавливает все свойства css в их начальное значение. внимание некоторые начальные значения наследуются; В результате некоторое форматирование все еще происходит в элементе.
Из-за этой паузы, необходимой при чтении кода или его просмотре в будущем, не используйте его, если только вы не очень, поскольку процесс обзора является точкой, где могут быть сделаны ошибки / ошибки! при редактировании страницы. Но очевидно, что если есть большое количество свойств, которые необходимо сбросить, то «все» — это то, что нужно.
Я создаю модальные блокирующие веб-сайты, это было решение для моих HTML-тегов, которые не перезаписывались стилями веб-сайтов. — Лукас Андраде
вы можете создать другое определение ниже в таблице стилей CSS, которое в основном меняет исходное правило на противоположное. вы также можете добавить «!важно» к указанному правилу, чтобы убедиться, что оно придерживается.
Вы должны использовать это
У меня была похожая ситуация, когда я работал над сайтом Joomla.
Добавлено имя класса для затрагиваемого модуля. В твоем случае:
затем сделал следующее однострочное изменение в css. Добавлена строка
Если я правильно понял вопрос: вы можете использовать auto в CSS так width: auto; и он вернется к настройкам по умолчанию.
Для CSS имело бы смысл просто добавить дополнительный стиль (например, в раздел заголовка вашей страницы, который бы переопределял связанную таблицу стилей), такой как этот:
и отключите все ранее примененные стили, но нет способа сделать это. Вам придется переопределить атрибут высоты и установить для него новое значение в разделе заголовка ваших страниц.
См. ниже машинописный текст для повторного применения класса css к элементу, чтобы переопределить стили css родительского контейнера (обычно компонента фреймворка) и принудительно применить свои пользовательские стили. Платформа вашего приложения (будь то angular/react, вероятно, делает это, поэтому родительский контейнер css был повторно применен, и ни один из ваших ожидаемых эффектов в css-class-name не отображается для вашего дочернего элемента. Call this.overrideParentCssRule(childElement, ‘ css-class-name’); чтобы сделать то, что только что сделал фреймворк (вызвать это в document.ready или обработчике конца события):
overrideParentCssRule(elem: HTMLElement, className: string) < let cssRules = this.getCSSStyle(className); for (let r: number = 0; r < cssRules.length; r++) < let rule: CSSStyleRule = cssRules[r]; Object.keys(rule.style).forEach(s => < if (isNaN(Number(s)) && rule.style[s]) < elem.style[s] = rule.style[s]; >>); > > Можете ли вы объяснить, почему для такого простого требования следует использовать машинописный текст? — Нико Хаасе
Существует множество значений, которые можно использовать для отмены правил CSS: начальное, неустановленное и откатное. Более подробная информация от Рабочей группы CSS в W3C:
Поскольку это «черновик», не все из них полностью поддерживаются, но неустановленные и начальные значения поддерживаются в большинстве основных браузеров, поэтому revert имеет меньшую поддержку.