“~” (Tilde / squiggle / twiddle) CSS තේරීම්කරු අදහස් කරන්නේ කුමක්ද?

~චරිතය සෙවීම පහසු නැත. මම සමහර CSS ගැන සොයා බලමින් සිටියදී මෙය සොයා ගත්තා

.check:checked ~ .content {
}

එයින් අදහස් කරන්නේ කුමක් ද?

මෙම ~තේරීම් ඇත්ත තමයි සාමාන්ය සහෝදර සහෝදරියන් combinator (දී පසු-සහෝදර සහෝදරියන් combinator නම වෙනස් කරන තේරීම් පෙළ 4 ):

සාමාන්‍ය සහෝදර සහෝදරියන්ගේ සංයෝජනය සෑදී ඇත්තේ "ටිල්ඩ්" (U + 007E, ~) අක්ෂරයෙන් වන අතර එය සරල තේරීම්කරුවන්ගේ අනුක්‍රම දෙකක් වෙන් කරයි. අනුක්‍රම දෙකෙන් නිරූපණය වන මූලද්‍රව්‍ය ලේඛන ගසෙහි එකම මාපිය බෙදා ගන්නා අතර පළමු අනුක්‍රමය මගින් නිරූපණය වන මූලද්‍රව්‍යය දෙවන එකෙන් නිරූපණය වන මූලද්‍රව්‍යයට පෙර (අනිවාර්යයෙන්ම නොවේ).

පහත උදාහරණය සලකා බලන්න:

.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 වන සහ 5 වන ලැයිස්තු අයිතමයට ගැලපෙන්නේ ඒවා නිසා:

• ද .bඅංග
• සහෝදර සහෝදරියන් .a
• .aHTML ප්‍රභව අනුපිළිවෙලින් පසුව පෙනී සිටින්න .

ඒ හා සමානව, සහෝදර සහෝදරියන් වන .check:checked ~ .contentසියලුම .contentඅංග සමඟ ගැලපෙන .check:checkedඅතර පසුව පෙනී යයි.

පවුලේ අනෙක් සංයෝජක පරීක්ෂා කිරීමටත් මෙම විශේෂිත දේ වෙත ආපසු යාමත් හොඳයි.

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

උදාහරණ පිරික්සුම් ලැයිස්තුව:

• ul li- සොයමින් තුල - තේරීම් සියලු වන liඇතුළත (ඕනෑම තැනක) තබා අංග ul; පැවත එන තේරීම් කාරකය
• ul > li- ඇතුළත බැලීම - සෘජු li අංග පමණක් තෝරා ගනී ul; එනම් එය තෝරා ගන්නේ සෘජු දරුවන් liපමණි ul; ළමා තේරීම් හෝ ළමා සංයෝජක තේරීම්
• ul + ul- පිටත බැලීම - ulපහත සඳහන් දේ වහාම තෝරා ගනී ul; එය ඇතුළත නොව, වහාම පහත සඳහන් මූලද්‍රව්‍යය සඳහා පිටත බැලීම; යාබද සහෝදර සහෝදරියන් තේරීම
• ul ~ ul- පිටත බැලීම - ulඅනුගමනය කරන සියල්ල තෝරාගන්නේ ulඑය කොතැනද යන්න ගැටළුවක් නොවේ, නමුත් දෙදෙනාම ulඑකම දෙමාපියෙකු සිටිය යුතුය; සාමාන්‍ය සහෝදර සහෝදරියන් තේරීම

අප මෙහි බලන්නේ ජෙනරාල් සහෝදර සහෝදරියන්ය

සාමාන්‍ය සහෝදර සහෝදරියන්

සාමාන්‍ය සහෝදර සහෝදරියන්ගේ තේරීම් කාරකය යාබද සහෝදර සහෝදරියන්ගේ තේරීම් කාරකයට බෙහෙවින් සමාන ය. වෙනස නම් තෝරාගත් මූලද්‍රව්‍යය පළමු මූලද්‍රව්‍යය වහාම සාර්ථක කර ගැනීමට අවශ්‍ය නොවන නමුත් එය පසුව ඕනෑම තැනක දිස්විය හැකිය.

වැඩි විස්තර

එය General sibling combinatorසලාමන්ගේ පිළිතුරෙන් ඉතා හොඳින් පැහැදිලි කර ඇත.

මා අතපසු Adjacent sibling combinatorකළ දෙය +හා එය සමීපව සම්බන්ධ වේ ~.

උදාහරණයක් වනු ඇත

.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>

• ඇති මූලද්‍රව්‍ය ගැලපේ .b
• යාබදව පිහිටා ඇත .a
• .aHTML වලින් පසුව

ඉහත උදාහරණයේ එය 2 වන liනමුත් 4 වන ලකුණු නොවේ.

   .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

ගුණාංග තේරීම් කාරකයක (උදා [attr~=value]:) ටිල්ඩ් බව සලකන්න

සුදු පැහැති අවකාශයෙන් වෙන් කරන ලද වචන ලැයිස්තුවක් වන attr හි ගුණාංග නාමයක් සහිත මූලද්‍රව්‍යයක් නිරූපණය කරයි , එයින් එකක් හරියටම අගය වේ.

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