2010-01-27 3 views
11

У меня есть стиль, назначенный для конкретного HTML-элемента в моем файле таблицы стилей, как этоКак я могу удалить встроенный стиль стилей CSS (без JavaScript)?


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

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


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

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

ответ

16

Из Mozilla developer center:

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

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

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

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

«без переопределения атрибутов стиля элемента со встроенными стилями» – Tom

+0

проклятый ответ на этот вопрос сложнее, чем я ожидал :( – Sophie88

+0

Мех, я все время так делаю, бросаясь быть первым ответом. Я думаю. – Tom

1

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

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

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

label#status-label { 
    width: auto; 
    color: blue; 
} 
2
<label ... class="default">...</label> 


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

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

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

0

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

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

Поддержка кажется, датированы приблизительно 2009 (FF3.5)

2

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

Смежные вопросы