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

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


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

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


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

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

11
css html inheritance override

6 ответов

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

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

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

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

16
  <label ... style = "width: auto; color: inherit" />
6
<label ... class="default">...</label>


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

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

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

2

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

2

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

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

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

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

можно использовать :не селектор:

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

поддержка, похоже, датируется примерно 2009 годом (ФФ3.5)

0