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 tradrejoe@gmail.com

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ę.