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

  • AllYourNewsByMe

    AllYourNewsB

    18 Temmuz 2011
  • EatingIn

    EatingIn

    12 EKİM 2013
  • ModNation Racers H.Q.

    ModNation Ra

    31 Ocak 2010