Jak zignorować nadrzędny styl CSS

Question 1

Zastanawiam się, jak zignorować styl rodzica i użyć stylu domyślnego (brak). Jako przykład pokażę mój konkretny przypadek, ale jestem pewien, że jest to ogólne pytanie.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Sposoby, w których nie chcę rozwiązać tego problemu:

Nie mogę edytować arkusza stylów, w którym ustawiono „#elementId select”, mój moduł nie będzie miał do niego dostępu.
Najlepiej nie zastępować stylu wysokości atrybutem style.

Na przykład używając firebuga mogę wyłączyć styl rodzica i wszystko jest w porządku, to jest efekt, do którego dążę.

Czy po ustawieniu stylu można go wyłączyć, czy też należy go zastąpić?

Question 2

Należy to zmienić. Możesz użyć:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Upewnij się, że używasz !importantflagi w stylu css, np. margin-top: 0px !important Co oznacza! Ważne w CSS?

Możesz użyć selektora atrybutu, ale ponieważ nie jest on obsługiwany przez starsze przeglądarki (czytaj IE6 itp.), Lepiej jest dodać nazwę klasy

Question 3

Możesz to wyłączyć, zastępując to w następujący sposób:

wysokość: auto! ważne;

Question 4

To dotarło na szczyt z powodu edycji ... Odpowiedzi stały się nieco przestarzałe i nie są dziś tak przydatne, jak inne rozwiązanie zostało dodane do standardu.

Istnieje teraz skrótowa własność „wszystko”.

#elementId select.funTimes {
   all: initial;
}

To ustawia wszystkie właściwości css na ich początkowe wartości ... zauważ, że niektóre z początkowych wartości są dziedziczone; W rezultacie pewne formatowanie nadal odbywa się na elemencie.

Ze względu na tę pauzę wymaganą podczas czytania kodu lub przeglądania go w przyszłości, nie używaj go, chyba że najbardziej, ponieważ proces przeglądu jest punktem, w którym można popełnić błędy / błędy! podczas edycji strony. Ale oczywiście, jeśli istnieje duża liczba właściwości, które należy zresetować, wówczas najlepszym rozwiązaniem jest „wszystkie”.

Standard jest dostępny tutaj: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

możesz utworzyć inną definicję niżej w arkuszu stylów CSS, która zasadniczo odwraca początkową regułę. możesz również dodać „! important” do wspomnianej reguły, aby upewnić się, że się trzyma.

Question 6

Powinieneś tego użyć

wysokość: auto! ważne;

Question 7

Podobną sytuację miałem podczas pracy nad stroną internetową Joomla.

Dodano nazwę klasy do modułu, którego ma dotyczyć zmiana. W Twoim przypadku:

<select name="funTimes" class="classname">

następnie wprowadził następującą zmianę pojedynczego wiersza w css. Dodano linię

#elementId div.classname {style to be applied !important;}

działało dobrze!

Question 8

Jeśli dobrze zrozumiałem pytanie: możesz użyć autow CSSten sposób width: auto;i wróci do ustawień domyślnych.

Question 9

Dla CSS sensowne byłoby dodanie dodatkowego stylu (na przykład w sekcji nagłówka strony, który zastąpiłby połączony arkusz stylów), na przykład:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

i wyłącz wszystkie wcześniej zastosowane style, ale nie da się tego zrobić . Będziesz musiał zastąpić atrybut wysokości i ustawić go na nową wartość w sekcji head na swoich stronach.

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

Zobacz poniższy maszynopis, aby ponownie zastosować klasę css do elementu, aby nadpisać style css kontenera nadrzędnego (zwykle komponent frameworka) i wymusić style niestandardowe. Struktura Twojej aplikacji (czy to angular / respond, prawdopodobnie robi to, aby kontener nadrzędny css został ponownie zastosowany i żaden z oczekiwanych efektów w css-class-name nie pojawia się dla elementu podrzędnego. Call this.overrideParentCssRule (childElement, ') css-class-name ''); aby zrobić to, co właśnie zrobił framework (wywołaj to w document.ready lub end of event handler):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng [email protected]

Question 11

Istnieje kilka wartości, których można użyć do cofnięcia reguł CSS: początkowe, cofnięte i przywrócone. Więcej szczegółów od Grupy Roboczej CSS w W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Ponieważ jest to „wersja robocza”, nie wszystkie są w pełni obsługiwane, ale w większości głównych przeglądarek są one nieustawione i początkowe, dlatego przywracanie ma mniejszą obsługę.

Answer 1

Zastanawiam się, jak zignorować styl rodzica i użyć stylu domyślnego (brak). Jako przykład pokażę mój konkretny przypadek, ale jestem pewien, że jest to ogólne pytanie.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Sposoby, w których nie chcę rozwiązać tego problemu:

Nie mogę edytować arkusza stylów, w którym ustawiono „#elementId select”, mój moduł nie będzie miał do niego dostępu.
Najlepiej nie zastępować stylu wysokości atrybutem style.

Na przykład używając firebuga mogę wyłączyć styl rodzica i wszystko jest w porządku, to jest efekt, do którego dążę.

Czy po ustawieniu stylu można go wyłączyć, czy też należy go zastąpić?

Answer 2

Należy to zmienić. Możesz użyć:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Upewnij się, że używasz !importantflagi w stylu css, np. margin-top: 0px !important Co oznacza! Ważne w CSS?

Możesz użyć selektora atrybutu, ale ponieważ nie jest on obsługiwany przez starsze przeglądarki (czytaj IE6 itp.), Lepiej jest dodać nazwę klasy

Answer 3

Ciągle się zrzędzę, mówiąc : Powinniście unikać tego, !importantco się da

Jacob Schneider.

Answer 4

55

Możesz to wyłączyć, zastępując to w następujący sposób:

wysokość: auto! ważne;

Fabian Brenes
źródło

5

Odradzałbym używanie !importantw produkcji znaczników - powinno być używane tylko podczas debugowania.

Polubowny

@Amicable Czy możesz wyjaśnić, dlaczego nie jest to zalecane?

felipe_gdr

1

@pipo_dev jest wiele artykułów online, które mogłyby to wyjaśnić lepiej niż ja w komentarzu i z przykładami. W skrócie, to hack. 99% czasu jest używany w lei poprawnej poprawki, która skutkowałaby lepszym i łatwiejszym w utrzymaniu CSS. Niektóre dopuszczalne zastosowania !importantobejmują klasy narzędziowe i do tyłu hacki zgodnością dla starożytnych przeglądarkach takich jak IE7

Polubowne

deosnt pracy. pagnacja jest ostatnim td w tabeli. .detailTable td {szerokość: 50%; } .pagnation {szerokość: 100%! ważne; }

Philip Rego

3

Nie zgadzam się z @Amicable. Naprawdę nie ma alternatywy dla używania, !importantgdy utkniesz z motywem nadrzędnym, nad którym nie masz kontroli, ale nadal chcesz go zastąpić.

Justin Skiles,

Answer 5

5

Odradzałbym używanie !importantw produkcji znaczników - powinno być używane tylko podczas debugowania.

Polubowny

Answer 6

@Amicable Czy możesz wyjaśnić, dlaczego nie jest to zalecane?

felipe_gdr

Answer 7

1

@pipo_dev jest wiele artykułów online, które mogłyby to wyjaśnić lepiej niż ja w komentarzu i z przykładami. W skrócie, to hack. 99% czasu jest używany w lei poprawnej poprawki, która skutkowałaby lepszym i łatwiejszym w utrzymaniu CSS. Niektóre dopuszczalne zastosowania !importantobejmują klasy narzędziowe i do tyłu hacki zgodnością dla starożytnych przeglądarkach takich jak IE7

Polubowne

Answer 8

deosnt pracy. pagnacja jest ostatnim td w tabeli. .detailTable td {szerokość: 50%; } .pagnation {szerokość: 100%! ważne; }

Philip Rego

Answer 9

3

Nie zgadzam się z @Amicable. Naprawdę nie ma alternatywy dla używania, !importantgdy utkniesz z motywem nadrzędnym, nad którym nie masz kontroli, ale nadal chcesz go zastąpić.

Justin Skiles,

Answer 10

To dotarło na szczyt z powodu edycji ... Odpowiedzi stały się nieco przestarzałe i nie są dziś tak przydatne, jak inne rozwiązanie zostało dodane do standardu.

Istnieje teraz skrótowa własność „wszystko”.

#elementId select.funTimes {
   all: initial;
}

To ustawia wszystkie właściwości css na ich początkowe wartości ... zauważ, że niektóre z początkowych wartości są dziedziczone; W rezultacie pewne formatowanie nadal odbywa się na elemencie.

Ze względu na tę pauzę wymaganą podczas czytania kodu lub przeglądania go w przyszłości, nie używaj go, chyba że najbardziej, ponieważ proces przeglądu jest punktem, w którym można popełnić błędy / błędy! podczas edycji strony. Ale oczywiście, jeśli istnieje duża liczba właściwości, które należy zresetować, wówczas najlepszym rozwiązaniem jest „wszystkie”.

Standard jest dostępny tutaj: https://drafts.csswg.org/css-cascade/#all-shorthand

Answer 11

Buduję modalne do blokowania witryn internetowych, to było rozwiązanie dla moich tagów HTML, które nie zostały nadpisane przez style witryn internetowych.

Lucas Andrade

Answer 12

możesz utworzyć inną definicję niżej w arkuszu stylów CSS, która zasadniczo odwraca początkową regułę. możesz również dodać „! important” do wspomnianej reguły, aby upewnić się, że się trzyma.

Answer 13

3

Powinieneś tego użyć

wysokość: auto! ważne;

Ahmar Mahmood
źródło

Answer 14

Podobną sytuację miałem podczas pracy nad stroną internetową Joomla.

Dodano nazwę klasy do modułu, którego ma dotyczyć zmiana. W Twoim przypadku:

<select name="funTimes" class="classname">

następnie wprowadził następującą zmianę pojedynczego wiersza w css. Dodano linię

#elementId div.classname {style to be applied !important;}

działało dobrze!

Answer 15

1

Jeśli dobrze zrozumiałem pytanie: możesz użyć autow CSSten sposób width: auto;i wróci do ustawień domyślnych.

elad srebrny
źródło

Answer 16

Dla CSS sensowne byłoby dodanie dodatkowego stylu (na przykład w sekcji nagłówka strony, który zastąpiłby połączony arkusz stylów), na przykład:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

i wyłącz wszystkie wcześniej zastosowane style, ale nie da się tego zrobić . Będziesz musiał zastąpić atrybut wysokości i ustawić go na nową wartość w sekcji head na swoich stronach.

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Answer 17

Zobacz poniższy maszynopis, aby ponownie zastosować klasę css do elementu, aby nadpisać style css kontenera nadrzędnego (zwykle komponent frameworka) i wymusić style niestandardowe. Struktura Twojej aplikacji (czy to angular / respond, prawdopodobnie robi to, aby kontener nadrzędny css został ponownie zastosowany i żaden z oczekiwanych efektów w css-class-name nie pojawia się dla elementu podrzędnego. Call this.overrideParentCssRule (childElement, ') css-class-name ''); aby zrobić to, co właśnie zrobił framework (wywołaj to w document.ready lub end of event handler):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng [email protected]

Answer 18

Czy możesz wyjaśnić, dlaczego w przypadku tak prostego wymagania należy używać maszynopisu?

Nico Haase

Answer 19

Istnieje kilka wartości, których można użyć do cofnięcia reguł CSS: początkowe, cofnięte i przywrócone. Więcej szczegółów od Grupy Roboczej CSS w W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Ponieważ jest to „wersja robocza”, nie wszystkie są w pełni obsługiwane, ale w większości głównych przeglądarek są one nieustawione i początkowe, dlatego przywracanie ma mniejszą obsługę.

Jak zignorować nadrzędny styl CSS

Odpowiedzi: