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

Question

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

<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 1

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

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

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 Что означает! Важное в CSS?

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

#elementId select.funTimes {
   all: initial;
}

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

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

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

Answer 6

если я правильно понял вопрос: вы можете использовать "auto" в css, как это width:auto, и тогда он вернется к настройкам по умолчанию

Answer 7

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

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

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

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

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

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

Answer 8

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