SORU
28 Mayıs 2012, PAZARTESİ


CSS ~ (tilde/değilsin/twiddle seçici) ne iş yapar?

~ tek bir karakter için arama kolay değil. Bazı css bakıyordum ve bunu buldum

.check:checked ~ .content {
}

Bu ne anlama geliyor?

CEVAP
28 Mayıs 2012, PAZARTESİ


~ seçici aslında General sibling combinator:

Genel kardeş kombinatorik ile yapılır. "" (U 007E, ~)tilde karakter o kadar basit seçiciler iki dizileri ayırır. Bu elemanları iki dizileri ile temsil edilen aynı üst payı belge ağacı ve eleman ilk sırasını temsil önündeki (mutlaka hemen) öğesi tarafından temsil ikincisi.

Düşünün aşağıdaki örnek:

.a ~ .b {
  background-color: powderblue;
}
<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b madde çünkü: 4 ve 5. liste ile eşleşir

  • .b elementler
  • .a kardeş
  • HTML kaynak sırası .a sonra görünür.

Aynı şekilde, .check:checked ~ .content .checked:checked kardeşler .content tüm öğeleri eşleşen ve sonra görünür.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Dylan Brenan

    Dylan Brenan

    22 Aralık 2009
  • Fraser Raft

    Fraser Raft

    9 Mart 2010
  • Tylerron

    Tylerron

    6 AĞUSTOS 2006