Ana css stili nasıl göz ardı edilir

Question 1

Bir ana stili nasıl yoksayacağımı ve varsayılan stili (yok) nasıl kullanacağımı merak ediyorum. Özel durumumu örnek olarak göstereceğim, ancak bunun genel bir soru olduğundan oldukça eminim.

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

Bu sorunu çözmek istemediğim yollar:

"#ElementId select" ayarının ayarlandığı stil sayfasını düzenleyemiyorum, modülüm buna erişemeyecek.
Stil özelliğini kullanarak yükseklik stilini geçersiz kılmayın.

Örneğin kundakçı kullanarak ana stili kapatabilirim ve her şey yolunda, bu benim istediğim efekt.

Bir stil ayarlandıktan sonra devre dışı bırakılabilir mi yoksa geçersiz kılınması mı gerekir?

Question 2

Geçersiz kılınmalıdır. Kullanabilirsin:

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

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

!importantCss stilinde bayrak kullandığınızdan emin olun. Örneğin margin-top: 0px !important , CSS'de! Önemli ne anlama geliyor?

Bir öznitelik seçici kullanabilirsiniz, ancak bu eski tarayıcılar tarafından desteklenmediğinden (IE6 vb. Okuyun), bir sınıf adı eklemek daha iyidir

Question 3

Bunu şu şekilde geçersiz kılarak kapatabilirsiniz:

yükseklik: otomatik! önemli;

Question 4

Bu, bir düzenleme nedeniyle zirveye çıktı ... Cevaplar biraz eskimiş ve bugün standarda başka bir çözüm eklenmiş olduğu kadar kullanışlı değil.

Artık bir "tümü" stenografi özelliği var.

#elementId select.funTimes {
   all: initial;
}

Bu, tüm css özelliklerini başlangıç değerlerine ayarlar ... bazı başlangıç değerlerinin miras alındığına dikkat edin ; Öğede hala yer alan bazı biçimlendirmelerle sonuçlanır.

Kodu okurken veya ileride incelerken gereken bu duraklamadan dolayı, gözden geçirme süreci hataların / hataların yapılabileceği bir nokta olduğundan, bunu kullanmadığınız sürece kullanmayın! sayfayı düzenlerken. Ancak, sıfırlanması gereken çok sayıda özellik varsa, "hepsi" en iyi yoldur.

Standart burada çevrimiçidir: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

CSS stil sayfanızda daha aşağıda, başlangıç kuralını tersine çeviren başka bir tanım oluşturabilirsiniz. Ayrıca, yapıştığından emin olmak için söz konusu kurala "! önemli" ifadesini de ekleyebilirsiniz.

Question 6

Bunu kullanmalısın

yükseklik: otomatik! önemli;

Question 7

Joomla web sitesinde çalışırken benzer bir durum yaşadım.

Etkilenecek modüle bir sınıf adı eklendi. Senin durumunda:

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

daha sonra css'de aşağıdaki tek satır değişikliği yaptı. Çizgi eklendi

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

iyi çalıştı!

Question 8

Soruyu doğru anladıysam: autobunun CSSgibi kullanabilirsiniz width: auto;ve varsayılan ayarlara dönecektir.

Question 9

CSS'nin, aşağıdaki gibi ek bir stil (örneğin, sayfanızın baş kısmında, bağlantılı stil sayfasını geçersiz kılacak) eklemenin bir yolunun olması mantıklı olacaktır:

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

ve önceden uygulanan tüm stilleri kapatın, ancak bunu yapmanın bir yolu yoktur . Yükseklik özelliğini geçersiz kılmanız ve sayfalarınızın baş bölümünde bunu yeni bir değere ayarlamanız gerekecektir.

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

Question 10

Ana kapsayıcı (genellikle bir çerçeve bileşeni) css stillerini geçersiz kılmak ve özel stillerinizi zorlamak için css sınıfını bir öğeye yeniden uygulamak için lütfen aşağıdaki typecript'e bakın. Uygulama çerçeveniz (ister açısal / tepki verilsin, muhtemelen bunu yapar, böylece üst kapsayıcı css yeniden uygulanmıştır ve css-class-name'de beklenen etkilerinizden hiçbiri alt öğeniz için görünmüyor. Bunu çağırın.overrideParentCssRule (childElement, ' css-class-name '); çerçevenin az önce yaptığını yapmak için (bunu document.ready veya end of event handler içinde çağırın):

      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

CSS kurallarını geri almak için kullanılabilecek bir dizi değer vardır: başlangıç, ayarlanmamış ve geri döndürme. W3C'deki CSS Çalışma Grubundan daha fazla ayrıntı:

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

Bu 'taslak' olduğu için tümü tam olarak desteklenmez, ancak ayarlanmamış ve başlangıç çoğu büyük tarayıcıda olduğundan, geri dönüş daha az desteğe sahiptir.