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

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

13 голосов
/ 27 января 2010

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


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

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


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

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

Ответы [ 6 ]

17 голосов
/ 27 января 2010

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

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

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

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

6 голосов
/ 27 января 2010 
  <label ... style = "width: auto; color: inherit" />
2 голосов
/ 01 июня 2016

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

2 голосов
/ 27 января 2010 
<label ... class="default">...</label>


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

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

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

1 голос
/ 27 января 2010

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

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

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

label#status-label {
  width: auto;
  color: blue; 
}
0 голосов
/ 21 ноября 2013

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

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

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

...