Вопрос по html, css, css-specificity – Могу ли я переопределить встроенный! Важно?

53

Если у вас есть

<div style="display: none !important;"></div>

Есть ли способ переопределить это в таблице стилей, чтобы она отображалась?

Предпочтительно использовать что-то похожее на это:

div { display: block !important; }
Для переопределенияdisplay: block !important, visibility: hidden; буду работать. Во всяком случае, не имеет отношения к вопросу. Но думал поделиться. user3364767

Ваш Ответ

6   ответов
3

Вот простое решение jQuery.

$(document).ready(function() { 
$('div').css('display','block');
})
0

Правила приоритета, когда два свойства CSS применяются к одному и тому же узлу:

  • !important beats not-!important. If equally !important, ...

  • style attribute beats css in a file. If both are in css files...

  • an ID in the CSS selector beats no ID. And more IDs beat less. (and you thought there was no reason for two IDs in a selector.) If same ID count...

  • Classes, or attributes like [name] in the selector, count them; more beats less. If all those are the same...

  • tag names like span or input, more beats less.

Итак, вы видите встроенный!important это высший приоритет.

70

Позвольте мне начать с того, чтоgenerally inline styles can be overridden:

.override {color:red !important;}​

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

повозился

Это поведение описанов спецификации W3где указано, что!important декларации не меняют специфику, а скорееtake precedence сверх "нормального" деклараций.

Тем не менее, когда противоречащие друг другу правила имеют!important флаг, специфичность диктует, что применяется встроенное правило - это означает, что для сценария OP нет способа переопределитьinline !important.

ОП четко заявляетinline !important - пожалуйста, прочитайте правильно! Тем не менее +1 за хороший ответ.
Ваш ответ ничего не говорит о переопределении!important встроенные стили. Вопрос задается о переопределении!important только встроенные стили.
Ах да, я только что заметил это в вашем последнем предложении.
@Christoph: но в ответах так же ясно говорится "вы не можете переопределить встроенный CSS", "встроенный имеет более высокий приоритет" ... Это неверно, отсюда первоначальная формулировка моего ответа. Я не ожидаю, что все отредактируют свои ответы, чтобы исправить ошибку
@BoltClock: хорошо, я действительно говорю, что нет способа переопределить важное значение inline (за исключением пользовательских стилей, но это вне контроля OP). Я обеспокоен формулировками, использованными в других ответах, предполагающими, что ванильное линейное правило не может быть переопределено.
22

Вы не можете переопределить встроенный CSS, если он имеет!important, Он имеет более высокий приоритет, чем стиль в вашем внешнем файле CSS.

Тем не менее, если вы захотите изменить некоторые действия позже, вы можете использовать немного JavaScript.

Невозможно использовать JavaScript, он предназначен для электронных писем. Jeffrey Basurto
5

Вы не можете переопределить встроенный стиль, имея!important, Первое предпочтение - встроенный стиль.

Например, у нас есть класс

.styleT{float:left;padding-left:4px;width:90px;}

и в JSP

<div class="styleT" id="inputT" style="padding-left:0px;">

здесь не принимаютpadding-left:4px; .Он принимает классstyleT кроме отступа слева: 4px ;. Будутpadding-left:0px;.

7

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

спасибо за редактирование, теперь это правильно

Похожие вопросы