Как игнорировать родительский стиль CSS

Question 1

Мне интересно, как игнорировать родительский стиль и использовать стиль по умолчанию (нет). Я покажу свой конкретный случай в качестве примера, но я уверен, что это общий вопрос.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Способы решения этой проблемы не хочу:

Я не могу редактировать таблицу стилей, в которой установлен "#elementId select", мой модуль не будет иметь к ней доступа.
Желательно не переопределять стиль высоты с помощью атрибута style.

Например, с помощью firebug я могу отключить родительский стиль, и все в порядке, это тот эффект, который я собираюсь получить.

После того, как стиль установлен, можно ли его отключить или переопределить?

Question 2

Это должно быть отменено. Вы можете использовать:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Убедитесь, что вы используете !importantфлаг в стиле css, например, margin-top: 0px !important что означает! Important в CSS?

Вы можете использовать селектор атрибутов, но, поскольку это не поддерживается устаревшими браузерами (читайте IE6 и т. Д.), Лучше добавить имя класса

Question 3

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

высота: авто! важно;

Question 4

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

Теперь существует сокращенное свойство «все».

#elementId select.funTimes {
   all: initial;
}

Это устанавливает все свойства css в их начальное значение ... обратите внимание, что некоторые из начальных значений наследуются; В результате в элементе все еще происходит некоторое форматирование.

Из-за этой паузы, необходимой при чтении кода или его проверке в будущем, не используйте ее, если вы больше всего, поскольку процесс проверки - это точка, где могут быть сделаны ошибки / ошибки! при редактировании страницы. Но ясно, что если есть большое количество свойств, которые необходимо сбросить, то «все» - лучший вариант.

Стандарт доступен здесь: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

вы можете создать другое определение ниже в таблице стилей CSS, которое полностью меняет исходное правило. вы также можете добавить "! important" к указанному правилу, чтобы убедиться, что оно соблюдается.

Question 6

Вы должны использовать это

высота: авто! важно;

Question 7

У меня была похожая ситуация, когда я работал над сайтом joomla.

В модуль, на который будет воздействовать, добавлено имя класса. В твоем случае:

<select name="funTimes" class="classname">

затем сделал следующее изменение одной строки в CSS. Добавил строку

#elementId div.classname {style to be applied !important;}

хорошо сработало!

Question 8

Если я правильно понял вопрос: вы можете использовать autoв CSSэтом, width: auto;и он вернется к настройкам по умолчанию.

Question 9

Для CSS было бы разумно иметь способ просто добавить дополнительный стиль (например, в раздел заголовка вашей страницы, который переопределил бы связанную таблицу стилей), например:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

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

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

Пожалуйста, см. Приведенный ниже машинописный текст для повторного применения класса css к элементу для переопределения стилей CSS родительского контейнера (обычно это компонент фреймворка) и принудительного применения ваших пользовательских стилей. Фреймворк вашего приложения (будь то angular / response, вероятно, делает это, поэтому родительский контейнер css был повторно применен, и ни один из ожидаемых эффектов в css-class-name не отображается для вашего дочернего элемента. Вызовите 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];
            }
          });
        }
      }

Майк Чжэн tradrejoe@gmail.com

Question 11

Есть несколько значений, которые можно использовать для отмены правил CSS: начальное, неустановленное и возвратное. Более подробная информация от рабочей группы CSS в W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Поскольку это «черновик», не все из них полностью поддерживаются, но unset и initial есть в большинстве основных браузеров, revert имеет меньшую поддержку.

Answer 1

Мне интересно, как игнорировать родительский стиль и использовать стиль по умолчанию (нет). Я покажу свой конкретный случай в качестве примера, но я уверен, что это общий вопрос.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Способы решения этой проблемы не хочу:

Я не могу редактировать таблицу стилей, в которой установлен "#elementId select", мой модуль не будет иметь к ней доступа.
Желательно не переопределять стиль высоты с помощью атрибута style.

Например, с помощью firebug я могу отключить родительский стиль, и все в порядке, это тот эффект, который я собираюсь получить.

После того, как стиль установлен, можно ли его отключить или переопределить?

Answer 2

Это должно быть отменено. Вы можете использовать:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Убедитесь, что вы используете !importantфлаг в стиле css, например, margin-top: 0px !important что означает! Important в CSS?

Вы можете использовать селектор атрибутов, но, поскольку это не поддерживается устаревшими браузерами (читайте IE6 и т. Д.), Лучше добавить имя класса

Answer 3

Меня постоянно придирают, говоря, что вам следует избегать всего, !importantчто можно,

Джейкоб Шнайдер

Answer 4

55

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

высота: авто! важно;

Фабиан Бренес
источник

5

Я бы не советовал использовать !importantв вашей производственной разметке - ее действительно следует использовать только при отладке.

Дружелюбный

@Amicable, можешь ли ты объяснить, почему это не рекомендуется?

felipe_gdr 07

1

@pipo_dev есть много статей в Интернете, которые могут объяснить это лучше, чем я мог бы в комментариях и с примерами. В двух словах, это хак. В 99% случаев он используется в лей правильного исправления, которое привело бы к лучшему и более удобному в поддержке CSS. Некоторые допустимые варианты использования !importantслужебных классов include и хаков обратной совместимости для древних браузеров, таких как IE7

Amicable,

деоснт работа. pagnation - это последний td в таблице. .detailTable td {width: 50%; } .pagnation {width: 100%! important; }

Филип Рего

3

Я не согласен с @Amicable. На самом деле нет альтернативы использованию, !importantкогда вы застряли с родительской темой, которую вы не контролируете, но все же хотите переопределить.

Джастин Скилз

Answer 5

5

Я бы не советовал использовать !importantв вашей производственной разметке - ее действительно следует использовать только при отладке.

Дружелюбный

Answer 6

@Amicable, можешь ли ты объяснить, почему это не рекомендуется?

felipe_gdr 07

Answer 7

1

@pipo_dev есть много статей в Интернете, которые могут объяснить это лучше, чем я мог бы в комментариях и с примерами. В двух словах, это хак. В 99% случаев он используется в лей правильного исправления, которое привело бы к лучшему и более удобному в поддержке CSS. Некоторые допустимые варианты использования !importantслужебных классов include и хаков обратной совместимости для древних браузеров, таких как IE7

Amicable,

Answer 8

деоснт работа. pagnation - это последний td в таблице. .detailTable td {width: 50%; } .pagnation {width: 100%! important; }

Филип Рего

Answer 9

3

Я не согласен с @Amicable. На самом деле нет альтернативы использованию, !importantкогда вы застряли с родительской темой, которую вы не контролируете, но все же хотите переопределить.

Джастин Скилз

Answer 10

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

Теперь существует сокращенное свойство «все».

#elementId select.funTimes {
   all: initial;
}

Это устанавливает все свойства css в их начальное значение ... обратите внимание, что некоторые из начальных значений наследуются; В результате в элементе все еще происходит некоторое форматирование.

Из-за этой паузы, необходимой при чтении кода или его проверке в будущем, не используйте ее, если вы больше всего, поскольку процесс проверки - это точка, где могут быть сделаны ошибки / ошибки! при редактировании страницы. Но ясно, что если есть большое количество свойств, которые необходимо сбросить, то «все» - лучший вариант.

Стандарт доступен здесь: https://drafts.csswg.org/css-cascade/#all-shorthand

Answer 11

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

Лукас Андраде

Answer 12

вы можете создать другое определение ниже в таблице стилей CSS, которое полностью меняет исходное правило. вы также можете добавить "! important" к указанному правилу, чтобы убедиться, что оно соблюдается.

Answer 13

3

Вы должны использовать это

высота: авто! важно;

Ахмар Махмуд
источник

Answer 14

У меня была похожая ситуация, когда я работал над сайтом joomla.

В модуль, на который будет воздействовать, добавлено имя класса. В твоем случае:

<select name="funTimes" class="classname">

затем сделал следующее изменение одной строки в CSS. Добавил строку

#elementId div.classname {style to be applied !important;}

хорошо сработало!

Answer 15

Если я правильно понял вопрос: вы можете использовать autoв CSSэтом, width: auto;и он вернется к настройкам по умолчанию.

Answer 16

Для CSS было бы разумно иметь способ просто добавить дополнительный стиль (например, в раздел заголовка вашей страницы, который переопределил бы связанную таблицу стилей), например:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

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

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Answer 17

Пожалуйста, см. Приведенный ниже машинописный текст для повторного применения класса css к элементу для переопределения стилей CSS родительского контейнера (обычно это компонент фреймворка) и принудительного применения ваших пользовательских стилей. Фреймворк вашего приложения (будь то angular / response, вероятно, делает это, поэтому родительский контейнер css был повторно применен, и ни один из ожидаемых эффектов в css-class-name не отображается для вашего дочернего элемента. Вызовите 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];
            }
          });
        }
      }

Майк Чжэн tradrejoe@gmail.com

Answer 18

Можете ли вы объяснить, почему для такого простого требования следует использовать машинописный текст?

Нико Хаасе

Answer 19

Есть несколько значений, которые можно использовать для отмены правил CSS: начальное, неустановленное и возвратное. Более подробная информация от рабочей группы CSS в W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Поскольку это «черновик», не все из них полностью поддерживаются, но unset и initial есть в большинстве основных браузеров, revert имеет меньшую поддержку.

Как игнорировать родительский стиль CSS

Ответы: