Сбросить свойство отображения CSS на значение по умолчанию

Можно ли переопределить свойство display значением по умолчанию? Например, если я установил его на none в одном стиле, и я хочу переопределить его в другом по умолчанию.

Или это единственный способ выяснить, что по умолчанию для этого элемента, а затем установить его на это? Хотелось бы не знать, является ли элемент обычно блочным, встроенным или каким бы то ни было ...

Стили браузера по умолчанию определены в его таблице стилей агента пользователя, источники которой вы можете найти здесь . К сожалению, спецификация Cascading and Inheritance level 3 , по-видимому, не предлагает способ сброса свойства стиля в его браузер по умолчанию. Однако есть планы повторно ввести ключевое слово для этого на уровне 4 каскадирования и наследования - рабочая группа просто еще не определилась с именем для этого ключевого слова (в настоящее время ссылка говорит revert, но она не является окончательной). Информацию о поддержке браузера revertможно найти на сайте caniuse.com .

В то время как спецификация уровня 3 вводит initialключевое слово , установка свойства к его начальному значению сбрасывает его к его значению по умолчанию, как определено CSS , а не как определено браузером . Начальное значение displayявляется inline; это указано здесь . initialКлючевое слово относится к этому значению, а не браузер по умолчанию. Сама спецификация делает это примечание под allсвойством :

Например, если автор указывает all: initialна элемент, он блокирует все наследование и сбрасывает все свойства, как если бы на уровне автора, пользователя или агента пользователя не существовало никаких правил каскада.

Это может быть полезно для корневого элемента «виджета», включенного в страницу, который не хочет наследовать стили внешней страницы. Однако обратите внимание, что любой стиль «по умолчанию», применяемый к этому элементу (например, например, display: blockиз таблицы стилей UA для таких элементов блока, как <div>), также будет удален.

Поэтому я думаю, что единственный способ использовать чистый CSS прямо сейчас - это найти значение по умолчанию в браузере и установить его вручную:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Альтернативой вышеупомянутому может быть div.foo:not(.bar) { display: inline-block; }, но это включает в себя изменение исходного селектора, а не переопределение.)

Если использование javascript разрешено , вы можете установить для displayсвойства пустую строку. Это заставит его использовать значение по умолчанию для этого конкретного элемента.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Вот ссылка на jsbin .

Это хорошо , потому что вам не придется беспокоиться о различных типах дисплея , чтобы вернуться к ( block, inline, inline-block, table-cellи т.д.).

Но для этого требуется javascript, поэтому, если вы ищете решение только для css, то это не решение для вас.

Примечание: это переопределяет встроенные стили, но не стили, установленные в CSS

Unset display:

Вы можете использовать значение, unsetкоторое работает как в Firefox, так и в Chrome .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

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

Конечно, можно установить для свойства значение, которое вы ожидаете использовать в качестве значения по умолчанию. Это может работать довольно широко, если вы проверите раздел « Рендеринг » в HTML5 CR, в основном отражая действия браузеров.

Тем не менее, ответ «Нет», потому что браузеры могут иметь любые значения по умолчанию, которые им нравятся. Вы должны проанализировать причину, по которой вы хотите сбросить настройки по умолчанию; оригинальная проблема все еще может быть разрешима.

Если у вас есть доступ к JavaScript , вы можете создать элемент и прочитать его вычисленный стиль.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Что касается ответа от BoltClock и Джона, у меня лично были проблемы с исходным ключевым словом при использовании IE11. Он отлично работает в Chrome, но в IE, похоже, не имеет никакого эффекта.

Согласно этому ответу IE не поддерживает начальное ключевое слово: Div display: начальное не работает, как задумано в ie10 и chrome 29

Я попытался установить его пустым вместо этого, как предложено здесь: как вернуться к нормальному состоянию после отображения: нет для строки таблицы

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