CSS kalıtımını nasıl engellerim?

Kenar çubuğumda iç içe geçmiş listeleri (<ul> ve <li> etiketleri) kullanan hiyerarşik bir gezinme menüsüne sahibim. Liste öğeleri için halihazırda stilleri olan önceden hazırlanmış bir tema kullanıyorum, ancak üst düzey öğelerin stilini değiştirmek ama alt öğelere uygulanmasını istemiyorum. Stilleri üst düzey liste öğesi etiketine, bu stillerin alt öğe listesi öğelerine doğru basamaklandırılmasına sahip OLMADAN uygulamanın kolay bir yolu var mı? Alt öğelere açıkça geçersiz kılan stiller ekleyebileceğimi anlıyorum, ancak "bu stilleri bu sınıfa uygulayın ve basamaklandırmayın herhangi bir alt öğeye kadar onları ". İşte kullandığım html:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Dolayısıyla, CSS'nin zaten #sidebar ulve için stilleri var #sidebar ul li, ancak #sidebar .top-level-navalt alt öğelerine kadar GELİŞMEYEN ek stiller eklemek istiyorum . Bunu basitçe yapmanın bir yolu var mı yoksa tüm stilleri yeniden düzenlemem mi gerekiyor, böylece mevcut stillerin #sidebar ulartık belirli sınıflara özel olması gerekiyor mu?

Henüz üst öğe seçiciler (veya Shaun Inman'ın dediği gibi , nitelikli seçiciler ) yoktur, bu nedenle, üst liste öğelerindeki stilleri geçersiz kılmak için alt liste öğelerine stiller uygulamanız gerekecektir.

Basamaklama, Basamaklı Stil Sayfalarının tüm noktası, dolayısıyla adıdır.

Ya çocuk seçiciyi kullanırsınız

Yani kullanarak

#parent > child

Stiller uygulanacak sadece birinci seviye çocukları yapacak. Maalesef IE6 çocuk seçiciyi desteklemiyor.

Aksi takdirde kullanabilirsiniz

#parent child child

Altta birden fazla düzey olan çocuklara başka belirli stiller ayarlamak için.

Denilen bir özellik vardır alliçinde CSS3 miras modülü . Şu şekilde çalışır:

#sidebar ul li {
  all: initial;
}

2016-12 itibariyle, IE / Edge ve Opera Mini dışındaki tüm tarayıcılar bu özelliği desteklemektedir.

Alt stilleri varsayılana döndürmek için * seçiciyi kullanabilirsiniz

misal

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

İframe ile sarma, üst css'yi geçersiz kılar.

Kısa cevap: Hayır, CSS kalıtımını önlemek mümkün değildir. Yalnızca üst öğe üzerinde ayarlanan stilleri geçersiz kılabilirsiniz. Spesifikasyona bakın:

Bir HTML belgesindeki her öğe, bir üst öğesi olmayan kök öğe ( html) dışında, kendi üst öğesinden devralınabilir tüm özellikleri devralır . - W3C

Miras alınan her bir mülkü geçersiz kılmak dışında. Ayrıca initialanahtar kelime de kullanabilirsiniz , örn color: initial;. Ayrıca all, örneğin all: initial;tüm özellikleri bir kerede sıfırlayacak şekilde birlikte kullanılabilir . Misal:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Kullanabilir miyim? E göre tarayıcı destek tabloları

• all (Şu anda hem IE hem de Edge'de destek yok, diğerleri iyidir)
• initial (Şu anda IE'de destek yok, diğerleri iyi)

Bazı durumlarda doğrudan çocuk seçiciyi> kullanarak bunu yararlı bulabilirsiniz . Misal:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Sınır stili, miras alınmayan bir özellik olduğu <li>gibi yalnızca doğrudan alt öğelere uygulanmıştır border. Ancak metin rengi, colormiras alınan bir özellik olarak tüm alt öğelere uygulanmıştır .

Bu nedenle, >kalıtımın engellenmesi söz konusu olduğunda , seçici yalnızca miras alınmayan özelliklerde yararlı olacaktır.

Bu davranışı "devre dışı bırakmak" için jQuery gibi bir şey kullanabilirsiniz, ancak css ve javascript'te görüntüleme mantığını elde ettiğiniz için bunun iyi bir çözüm olduğunu düşünmüyorum. Yine de, gereksinimlerinize bağlı olarak, jQuery'nin css araçlarının, özellikle IE6 için çalışmasını sağlamaya çalışıyorsanız, hayatı sizin için hacky css'i denemekten daha kolay hale getirdiğini görebilirsiniz.

Örneğin, XHTML belgesinde iki div'iniz varsa.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Sonra bunu CSS'de deneyin.

#div1 > #div2 > p{
    color: red;
}

yalnızca 'div2' paragrafını etkiler.

#div1 > p {
    color: red;
} 

yalnızca 'div1' paragrafını etkiler.

E'ler için sınıf referansına ihtiyacınız yok li. CSS beğenisine sahip olmak yerine

li.top-level-nav { color:black; }

Yazabilirsin

ul#sidebar > li { color:black; }

Bu, stili yalnızca likenar çubuğundan hemen inen e-postalara uygulayacaktır ul.

"#sidebar ul li" seçicisinde bunları varsayılan değerlerine geri döndürmeniz yeterlidir