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

  • Gali B

    Gali B

    1 EYLÜL 2006
  • Apple&Tech Reviews & Giveaways

    Apple&Tech R

    12 Temmuz 2008
  • STITCHLESS TV how to sew your own style tutorials

    STITCHLESS T

    9 HAZİRAN 2011