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

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

<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 я могу отключить родительский стиль, и все хорошо, это эффект, который я собираюсь.

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

7 62
css

7 ответов:

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

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

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

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

27

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

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

54

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

3

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

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

3

у меня была похожая ситуация во время работы на веб-сайте joomla.

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

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

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

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

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

1

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

1

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

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

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

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