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

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

<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, мой модуль не будет иметь доступ к этому.
  • Не рекомендуется переопределять стиль высоты с использованием атрибута style.

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

height: auto! important;

Ответ 3

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

Ответ 4

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

height: auto! important;

Ответ 5

У меня была аналогичная ситуация, работая на веб-сайте joomla.

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

См. Ниже машинописный текст для повторного применения класса css снова к элементу для переопределения стилей css-контейнера (обычно это компонент структуры) css и принудительного создания пользовательских стилей. Ваша инфраструктура приложения (будь она угловатой/реагирующей, возможно, делает это так, чтобы родительский контейнер css был повторно применен, и ни один из ваших ожидаемых эффектов в css-class-name не появился для вашего дочернего элемента. Вызовите this.overrideParentCssRule(childElement, css-class-name '), чтобы сделать то, что только что сделал (вызовите это в document.ready или end обработчика события):

      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];
            }
          });
        }
      }