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

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

Пример:

CSS

.navigation input {
    padding: 0;
    margin: 0 30em;
}

HTML

<div class="navigation">
    Some text: <input type="text" name="one" />
    More text: <input type="text" name="two" />
    <!-- The next input, I want it to be as browser-default -->
    <div class="child">
        <input type="text" name="three">
    </div>
</div>

Здесь, по браузеру по умолчанию, я имею в виду, что я хочу, чтобы он выглядел точно так, как если бы ни один CSS не был применен к этому элементу.

Здесь я использую элемент input в качестве примера, но я говорю о любом элементе. Я не спрашиваю, как установить различные атрибуты CSS для этого конкретного элемента, я спрашиваю, как reset его по умолчанию.

Различные элементы имеют разные атрибуты по умолчанию, такие как padding, когда они не установлены. Например, button, который имеет прописку 0 в CSS, обернет текст без какого-либо пробела. Вы можете позже установить его дополнение к другому значению, но как бы вы установили его на заполнение по умолчанию?

Заранее благодарим за любые комментарии!

Ответ 1

Если вы говорите о настройках браузера по умолчанию, чем смотрите таблицы стилей CSS reset, они находятся по всему миру, эти таблицы стилей reset для каждого свойства элементов стандартизированы.

Несколько примеров

Meyer Web

HTML5 Doctor (CSS reset с включенными элементами HTML5)

Если вы говорите, что ручной стиль сбрасывает и игнорирует наследование, чем до сих пор, нет способа полностью стирать reset до тех пор, пока вы не повторно объявите свои значения, например,

div {
   color: red;
   font-family: Arial;
}

div p {
   /* Here it will inherit the parents child unless and 
      until you re specify properties with different values */
}

Ответ 2

в вашем случае вы можете использовать это:

.navigation input {    
    all: initial;
}

он вернет все атрибуты вашего ввода к исходному значению.

источник: http://www.w3schools.com/cssref/css3_pr_all.asp

Ответ 3

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

С другой стороны, ваш пример устанавливает padding и margin, которые не наследуются. Таким образом, кажется, вопрос заключается в том, как запретить использование собственного правила CSS для определенного элемента. Тогда ответ заключается в том, что вам нужно изменить селектор правила, чтобы конкретный элемент не соответствовал ему. В вашем случае это можно сделать, изменив селектор на

.navigation > input

Но чем сложнее разметка и таблица стилей, тем труднее становится ограничивать последствия таким образом.

Ответ 4

В CSS 4 CR предусмотрено ключевое слово revert для значений. Похоже, что он предназначен именно для этой цели и может использоваться следующим образом:

.navigation input {    
    all: revert;
}

Тем не менее, его поддержка браузера не очень впечатляет на момент написания...

Ответ 5

Я думаю, что некоторые из них должны работать:

/* Valeurs avec mot-clé */


clear: none;

clear: left;

clear: right;

clear: both;

clear: inline-start;

clear: inline-end;


/* Valeurs globales */

clear: inherit;

clear: initial;

clear: unset;

источники:

тост рм -rf/*

lmgtfy: "css3 + clear" в любой поисковой системе

https://developer.mozilla.org/fr/docs/Web/CSS/clear

Ответ 6

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

.navigation input {
    padding: 0;
    margin: 0 30em;
    border-color: unset;
}

это отменит стиль, унаследованный от других классов.