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

У меня есть стиль, назначенный для определенного элемента HTML в моем файле таблицы стилей, например


label {
  width: 200px;
  color: red; 
}

В одном специальном случае я хотел бы использовать элемент метки в документе HTML, но игнорировать стиль, указанный для элемента label (только для одного экземпляра в документе). Есть ли способ достичь этого общим способом без переопределения атрибутов стиля элемента с встроенными стилями?


<label for="status">Open</label>

Чтобы повторить, к HTML-коду, отображающему метку, применяется стиль элемента (ширина 200 пикселей, красный цвет). Я бы хотел использовать атрибуты стиля по умолчанию (не зная, что это такое) и не знать, что конкретно указано в настройке стиля элемента.

Ответы

Ответ 1

Из Центра разработчика Mozilla:

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

Таким образом, особое внимание следует уделять написанию правил стиля с использованием селекторов (например, селекторов по имени тегов, таких как p), которые вы можете переопределить с помощью более конкретных правил (например, с использованием селекторов id или классов), поскольку исходное значение по умолчанию не может быть автоматически восстановлено.

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

Ответ 2

  <label ... style = "width: auto; color: inherit" />

Ответ 3

<label ... class="default">...</label>


label {
  width: 200px;
  color: red; 
}

label.default {
  width: auto;
  color: inherit; 
}

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

Ответ 4

Ситуация несколько изменилась за последние 6 лет: теперь можно удалить свойство CSS без использования JavaScript с помощью initial, unset или revert ключевые слова. Они поддерживаются во всех современных браузерах.

Ответ 5

Я не думаю, что вы можете reset до того, что было до определения метки в таблице стилей, но вы можете присвоить ярлыку id и переопределить его в таблице стилей.

<label for="status" id="status-label">Open</label>

label {
  width: 200px;
  color: red; 
}

label#status-label {
  width: auto;
  color: blue; 
}

Ответ 6

Вы можете использовать : not selector:

label:not([for="status"]) {
  width: 200px;
  color: red; 
}

Поддержка, похоже, относится к 2009 году (FF3.5)