CSS: Seç ilk bitişik kardeş

Question

Ben bir HTML listesi şöyle var: Başlık 1 altında metin içermiyor

<ul> 
    <li class="heading">Heading 1</li> 
    <li class="heading">Heading 2</li> 
    <li>Text Under Heading 2</li> 
</ul> 

beri, CSS ile gizlemek istiyorum.

Bunu yaparsam,

li.heading + li.heading { display: none; } 

o Başlık 2 yerine ben Başlık 1 gizleyebilirsiniz 1. Nasıl

Başlık gizler? Bitişik kardeşleri aramak ve ilkini seçmek için bir yolu var mı?

Answer 1

Geçerli olarak tanımlandığı ve uygulandığı haliyle CSS kullanmak mümkün değildir. Bundan sonra kardeşlerine göre bir element seçen bir seçici gerektirir. CSS seçiciler, bir öğeyi, önceki veya dış elemanlar temelinde seçebilir, ancak aşağıdaki veya iç elemanlara dayanarak seçemezler.

İstenilen etki, JavaScript kullanılarak oldukça basit bir şekilde gerçekleştirilebilir ve amaçlara bağlı olarak, öğeleri ekrandan kaldırmaya veya belge ağacından tamamen kaldırmaya karar verebilirsiniz.

Answer 2

gizlemek için birkaç yolu vardır sadece sadece "Başlık 1":

ul li:first-child {display:none;}

Alternatif olarak:

li.parent{ display: none; } 
li.parent + li.parent { display: list-item; } 

Ayrıca <li>Child of Heading 2</li>değil<li class="parent">Heading 2</li> bir çocuktur. Bu bir kardeş.

Answer 3

Resmi CSS3 Spec şu anda böyle bir şeyi desteklemiyor, ancak yararlı olacağını anlıyorum.

Css seçicilerini eklemek için önceden oluşturulmuş bazı javascript veya jquery komut dosyaları/kütüphaneleri için arama yapmayı denerim. Yine de hiçbir şeye rastlamadım.

Bir şeye rastlarsanız, lütfen buraya gönderin.

Hiçbir şey bulamazsanız, el ile de yapabilir veya tamamen farklı bir çözüm bulmaya çalışabilirsiniz.

Keşke senin için daha iyi bir cevabım olsaydı. Maalesef :(

Answer 4

Bazı kısıtlamalarla, CSS ile ilk kardeş hedeflemek mümkündür. Söz konusu Örneğin

yap Bu işler bu

li.heading { display: none; }     /* apply to all elements */ 
li.heading + li.heading { display: list-item } /* override for all but first sibling */ 

gibi bir şeyle yapılır, ama olabilir ilk çocuk için ayarları geçersiz kılmak için kardeşleri stilleri açıkça ayarlayabilmenizi gerektirir.

Answer 5

getElementsby SinifAdi için js kullanmayı deneyin ve 1'den fazla sonra css kullanırsanız:

ul li: first-child {display: none;}

Answer 6

Ben bu soruyu zaten geçerli işaretli cevabı vardır biliyorum ancak diğer insanlar css çözümünü kullanmak isteyebilir:

Bir kapsayıcıda uyarıların (bu durumda önyükleme uyarıları) bir listesini ve bunların sınırlarını daraltmak istedim. Her bir uyarı, hepsi bir kapta olduklarında oldukça aptalca görünen bir sınır yarıçapına sahiptir. Yani marj-top ile: -1px Ben onların sınırları çöküşü yaptım. Bir sonraki adım olarak, ilk ve her uyarı arasındaki stilleri değiştirmek zorunda kaldım. Ve bu da tek bir uyarı, iki uyarı ve n uyarı için iyi görünmelidir.

.alert { 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    margin: 0; 
} 

// set for the first alert that it should have a rounded top border 

.alert:last-child { 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 

// set for the last alert that it should have a rounded bottom border 
// if there is only one alert this will also trigger it to have a rounded bottom border aswell 

.alert+.alert:last-child { 
    margin-top: -1px; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
} 

//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders 

.alert+.alert:not(:last-child) { 
    margin-top: -1px; 
    border-radius: 0; 
} 

// for each following alert in between we remove the top rounded borders and make their borders collapse 

Ve burada birden çok uyarı için açısal bir şablon var.

<div id="alertscontainer"> 
    <div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class"> 
     {{alert.body}} 
    </div> 
</div>