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

  • BlackmillMusic

    BlackmillMus

    3 Kasım 2010
  • Elly Awesome

    Elly Awesome

    15 ŞUBAT 2010
  • REK Roth Productions

    REK Roth Pro

    8 Ocak 2011