“~” (Tilde / dalgalı / twiddle) CSS seçici ne anlama geliyor?

~Karakteri aramak kolay değil. Bazı CSS'lere bakıyordum ve bunu buldum

.check:checked ~ .content {
}

Bunun anlamı ne?

~Seçici aslında Genel kardeş combinator (daha sonra yapılan-kardeş combinator olarak değiştirildi seçicileri Seviye 4 ):

Genel kardeş birleştirici, basit seçicilerin iki dizisini ayıran "tilde" (U + 007E, ~) karakterinden oluşur. İki sekans tarafından temsil edilen elemanlar, belge ağacında aynı ebeveyni paylaşır ve birinci sekans tarafından temsil edilen eleman, ikincisi tarafından temsil edilen elemandan önce (mutlaka gerekli değildir) önce gelir.

Aşağıdaki örneği düşünün:

.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 4. ve 5. liste öğesiyle eşleşir, çünkü:

• Are .belementler
• Kardeşleri .a
• Sonra .aHTML kaynak sırasına göre görünür .

Benzer şekilde, kardeş olan ve ondan sonra görünen .check:checked ~ .contenttüm .contentunsurlarla eşleşir .check:checked.

Ayrıca ailedeki diğer birleştiricileri kontrol etmek ve bu özel olana geri dönmek de iyidir.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Örnek kontrol listesi:

• ul li- içinde baktığımızda - seçer tümli unsurları (her yerde) içine yerleştirilmiş ul; Torun seçici
• ul > li- İçeriye bakma - Yalnızca doğrudan li öğelerini seçer ul; sadece direkt çocukları seçecektir yani libir ul; Çocuk Seçici veya Çocuk birleştirici seçici
• ul + ul- Dışa bakma - ulHemen ardından gelenleri seçer ul; İçeriye bakmıyor ama hemen takip eden elementi dışarıya bakıyor; Bitişik Kardeş Seçici
• ul ~ ul- Dışa bakma - Nerede olursa olsun ultakip edenlerin tümünü seçer ul, ancak her ikisinin ulde aynı ebeveyni olmalıdır; Genel Kardeş Seçici

Burada baktığımız kişi Genel Kardeş Seçici

Genel kardeş birleştirici

Genel kardeş birleştirici seçici, bitişik kardeş birleştirici seçiciye çok benzer. Fark, seçilen öğenin hemen ilk öğeyi başarması gerekmediği, ancak bundan sonra herhangi bir yerde görünebileceğidir.

Daha fazla bilgi

Öyle General sibling combinatorve çok iyi Salaman cevabı @ açıklanmıştır.

Yaptığım şey Adjacent sibling combinatorhangisi +ile yakından ilgili ~.

örnek olur

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Öğeleri eşleştirir .b
• Bitişik .a
• .aHTML'den sonra

Yukarıdaki örnekte 2., li4. değil.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Bir özellik seçicide (ör., [attr~=value]Tilde)

Bir değeri tam olarak değer olan boşlukla ayrılmış sözcük listesi olan attr öznitelik adına sahip bir öğeyi temsil eder .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors