Jak mogę anulować właściwość CSS?


109

Zasadniczo mam na swojej stronie dwa zewnętrzne css.

Pierwsza Main.csszawiera wszystkie reguły stylu, ale nie mam do niej dostępu, więc nie mogę jej modyfikować. Mam dostęp do drugiego pliku Template.css, więc muszę nadpisać Main.csswartości w template.css.

Jest to łatwe i muszę zmienić wartość, ale jak całkowicie usunąć właściwość?

Na przykład klasa .c1ma height: 40px;, jak pozbyć się tej właściwości wysokości?


Odpowiedzi:


175

Musisz zresetować każdą indywidualną właściwość z powrotem do jej wartości domyślnej. To nie jest świetne, ale to jedyny sposób, biorąc pod uwagę informacje, które nam przekazałeś.

W swoim przykładzie zrobiłbyś:

.c1 {
    height: auto;
}

Powinieneś wyszukać każdą nieruchomość tutaj:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Na przykładheight :

Wartość początkowa : auto

Inny przykładmax-height :

Wartość początkowa : none


W 2017 roku jest teraz inny sposób, unsetsłowo kluczowe:

.c1 {
    height: unset;
}

Część dokumentacji: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Nieskonfigurowane słowo kluczowe CSS to kombinacja początkowych i dziedziczonych słów kluczowych. Podobnie jak te dwa inne słowa kluczowe dotyczące całego CSS, można je zastosować do dowolnej właściwości CSS, w tym skrótu CSS all. To słowo kluczowe resetuje właściwość do odziedziczonej wartości, jeśli dziedziczy ona po swoim rodzicu lub do wartości początkowej, jeśli nie. Innymi słowy, zachowuje się jak słowo kluczowe inherit w pierwszym przypadku i jak początkowe słowo kluczowe w drugim przypadku.

Obsługa przeglądarek jest dobra: http://caniuse.com/css-unset-value


3
+1 za miłą odpowiedź i odniesienie. Myślę, że link zmienił się na: developer.mozilla.org/en-US/docs/Web/CSS/Reference
Paolo

Ustawienie wartości na auto nie działa, gdy nie ma wartości początkowej („wartość początkowa: brak”). Na przykład podczas wykonywania „max-width: auto;” Otrzymuję błąd niedopasowanej wartości właściwości. Co powinienem zrobić?
user1779563

3
@ user1779563 Ustawiłeś to na „none”.
AndreKR

1
Chciałbym podziękować @simhumileco za odpowiedź, którą bezwstydnie ukradłem, ponieważ moja odpowiedź została zaakceptowana i ludzie nie mogą przewijać w dół.
thirtydot

10
.c1 {
    height: unset;
}

unsetWartość dodana w CSS3 rozwiązuje również ten problem i to nawet bardziej uniwersalny sposób niż autolubinitial dlatego, że ustawia się do każdej własności CSS wartość domyślną, a dodatkowo jego domyślne behawior względem jego rodzica.

Zauważ, że initialwartość łamie wyżej wymienione zachowanie.

Z MDN :

Podobnie jak te dwa inne słowa kluczowe dotyczące całego CSS, można je zastosować do dowolnej właściwości CSS, w tym skrótu CSS all . To słowo kluczowe resetuje właściwość do odziedziczonej wartości, jeśli dziedziczy ona po swoim rodzicu lub do wartości początkowej, jeśli nie.


9

na przykład klasa .c1 ma wysokość: 40px; jak pozbyć się tej właściwości wysokości?

Niestety nie możesz. CSS nie ma „domyślnego” symbolu zastępczego.

W takim przypadku należy zresetować właściwość za pomocą

 height: auto;

jak słusznie wskazuje @Ben, w niektórych przypadkach inheritjest to właściwy sposób, na przykład podczas resetowania koloru tekstu aelementu (ta właściwość jest dziedziczona z elementu nadrzędnego):

a { color: inherit }

3
Dam +1. Istnieje również wartość „dziedziczenie”. W niektórych kontekstach innych niż wzrost dziedziczenie jest bardziej odpowiednie.
Ben

1
@meo masz rację. (Powiązane pytanie), które wydaje się oznaczać, że istnieją właściwości, których nie można przywrócić do wartości domyślnych w IE ... szkoda
Pekka

7

Słowo initialkluczowe jest dodawane w CSS3, aby umożliwić autorom jawne określenie tej wartości początkowej.


FYI: height:initial;nie działa w IE9.
Kris Hollenbeck,

więc jaka jest różnica między initiali autoi unset?.
ExillustX

2

Aby pozbyć się właściwości stałej wysokości, możesz ustawić ją na wartość domyślną:

height: auto;

2

Musisz zapewnić selektor o wyższej specyficzności niż ten w Main.css. Za pomocą tego selektora ustaw wartości właściwości, które chcesz, na ich domyślne, np

body .c1 {
    height: auto;
}

Nie ma wartości „domyślnej”, która działałaby dla wszystkich właściwości, musisz sprawdzić, jaka jest wartość domyślna dla każdej z nich i użyć jej.


1

Miałem problem, że nawet gdy nadpisałem „wysokość” na „nieskonfigurowany” lub „początkowy”, zachowywał się on inaczej niż po usunięciu poprzedniego ustawienia.

Okazało się, że muszę też usunąć właściwość min-height!

height: unset;
min-height: none

Edycja: Testowałem na IE 7 i nie rozpoznaje "unset", więc "auto" działa lepiej ".

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.