CSS ตัวเลือก“ ~” (tilde / squiggle / twiddle) หมายถึงอะไร?

857

การค้นหา~ตัวละครนั้นไม่ใช่เรื่องง่าย ฉันดู CSS และพบสิ่งนี้

.check:checked ~ .content {
}

มันหมายความว่าอะไร?

css css-selectors

— Akshat
แหล่งที่มา

3

ตรวจสอบตัวอย่างที่คุณจะเข้าใจต่อไปนี้เป็นรายการตัวเลือก CSS

— Dipak

@TylerH เป็นสิ่งที่ใช้บ่อยมากในโพสต์ Stack Overflow โปรดเข้าใจง่ายฉันไม่ได้ตั้งใจทำให้รู้สึกแย่

— Arsen Khachaturyan

@ArsenKhachaturyan บางทีคุณอาจเข้าใจผิด ไวยากรณ์คำพูดบล็อกใช้สำหรับระบุคำพูดซึ่งเมื่อผู้ใช้ระบุบางสิ่ง (ข้อความรูปภาพรหัส ฯลฯ ) ไม่ใช่งานหรือคำของตัวเอง แต่คัดลอกมาจากที่อื่น เช่นเดียวกับการจัดรูปแบบทั้งหมดมันมีวัตถุประสงค์ความหมาย; มันไม่ใช่สิ่งที่จะเพิ่มความจำใจ ในทำนองเดียวกันโปรดอย่าได้เพิ่มการเน้นตัวหนาสุ่มคำ มันควรจะใช้สำหรับการเน้นเท่าที่จำเป็น

— TylerH

@TylerH ฉันเข้าใจว่าชื่อคือ "quote" และความหมายของ "quote" นั้นหมายถึงอะไร อย่างไรก็ตามบางครั้งเมื่อคุณต้องการแยกความแตกต่างคำถามจากข้อความธรรมดาคุณสามารถลองใช้เทคนิคการเน้นบางอย่างที่ฉันทำ สำหรับการทำให้เป็นตัวหนาก็จะใช้เมื่อคุณต้องการเน้นสิ่งต่าง ๆ เช่นคำหลักหรือคำที่รู้จักกันดี ฉันมักจะไม่ชอบเวลาที่คนใช้เป็นตัวหนาเพราะไม่ทราบสาเหตุ แต่บางครั้งก็สามารถใช้สำหรับคนที่จะค้นหาข้อมูลที่เกี่ยวข้องกับหัวข้อได้อย่างง่ายดาย

— Arsen Khachaturyan

@ArsenKhachaturyan โปรดอย่าทำเช่นนั้น >สำหรับคำพูดเท่านั้นมันไม่เคยถูกใช้เพื่อวัตถุประสงค์อื่นใด คุณไม่ควรระบุชื่อของเทคโนโลยีแบบสุ่มในคำถาม เราสามารถเห็นเทคโนโลยีที่เกี่ยวข้องผ่านแท็ก

— meagar

1370

~เลือกในความเป็นจริงพี่น้อง Combinator ทั่วไป (เปลี่ยนชื่อภายหลัง-Combinator พี่น้องในตัวเลือกระดับที่ 4 ):

เครื่องคอมบิเนเตอร์พี่น้องทั่วไปทำจากอักขระ "tilde" (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
ปรากฏขึ้นตาม.aลำดับที่มาของ HTML

เช่นเดียวกัน.check:checked ~ .contentจับคู่.contentองค์ประกอบทั้งหมดที่เป็นพี่น้องกัน.check:checkedและปรากฏตามมา

— ซัลมาน
แหล่งที่มา

13

"ไม่จำเป็นทันที" เป็นส่วนสำคัญของคำอธิบายนี้

— PanicBus

1

มีตัวเลือกสำหรับองค์ประกอบทั้งหมดที่มีพาเรนต์เดียวกันด้วยหรือไม่

— Nick N.

1

@NickN คุณหมายถึง.parent > *อะไร

— Salman

@SalmanA ไม่แน่นอนฉันหวังว่าจะมีตัวเลือกที่คุณสามารถใช้ได้หากคุณไม่รู้จักผู้ปกครอง

— Nick N.

7

@ NickN ไม่มีเลย CSS สร้างขึ้นด้วยข้อเสนอที่ตัวแยกวิเคราะห์ CSS จะไม่มองย้อนกลับไปใน DOM เพื่อทำการจับคู่ นั่นคือเหตุผลเดียวกันที่ไม่มีตัวเลือกหลัก

— yunzen

191

เป็นการดีที่จะตรวจสอบcombinatorsอื่น ๆในครอบครัวและเพื่อกลับไปที่สิ่งที่เฉพาะเจาะจงนี้

ul li
ul > li
ul + ul
ul ~ ul

รายการตรวจสอบตัวอย่าง:

ul li- มองเข้าไปข้างใน - เลือกองค์ประกอบทั้งหมดที่liวางไว้ (ที่ใดก็ได้) ภายในul; ตัวเลือกลูกหลาน
ul > li- มองเข้าไปข้างใน - เลือกเฉพาะ liองค์ประกอบโดยตรงของul; นั่นคือจะเลือกเฉพาะลูก ๆliของul; Child SelectorหรือChild combinator selector
ul + ul- มองออกไปข้างนอก - เลือกulทันทีหลังจากul; มันไม่ได้มองเข้าไปข้างใน แต่มองออกไปข้างนอกสำหรับองค์ประกอบต่อไปนี้ทันที ตัวเลือกพี่น้องที่อยู่ติดกัน
ul ~ ul- มองออกไปข้างนอก - เลือกทั้งหมดulที่ตามมาulไม่สำคัญว่าจะอยู่ที่ไหน แต่ทั้งulคู่ควรมีพาเรนต์เดียวกัน ตัวเลือกพี่น้องทั่วไป

สิ่งที่เรากำลังดูที่นี่คือGeneral Sibling Selector

— Lijo Joseph
แหล่งที่มา

2

อันนี้ทำให้รู้สึกมากที่สุด คำศัพท์ของคนธรรมดาเพื่อช่วยชีวิตอีกครั้ง ตอนนี้ฉันสามารถอ่านเอกสารทางเทคนิคได้แล้ว

— TheRealChx101

2

มีตัวเลือกพี่น้องสำหรับพี่น้องทุกคนไม่ใช่เฉพาะผู้ติดตามเท่านั้น?

— เอลียาห์เยาะเย้ย

1

@EliTheHuman ไม่มี โปรดอ้างอิงโพสต์ SO นี้สำหรับรายละเอียดเพิ่มเติม - stackoverflow.com/a/11813469/6830901

— Lijo Joseph

174

ผู้ประสานงานพี่น้องทั่วไป

ตัวเลือก combinator พี่น้องทั่วไปคล้ายกันมากกับตัวเลือก combinator พี่น้องที่อยู่ติดกัน ความแตกต่างคือองค์ประกอบที่เลือกไม่จำเป็นต้องประสบความสำเร็จในองค์ประกอบแรกทันที แต่สามารถปรากฏที่ใดก็ได้หลังจากนั้น

ข้อมูลเพิ่มเติม

— Rohit Azad
แหล่งที่มา

31

มันเป็นGeneral sibling combinatorและมีการอธิบายในคำตอบของ @ Salaman เป็นอย่างดี

สิ่งที่ฉันไม่พลาดคือ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
หลังจาก.aใน HTML

ในตัวอย่างด้านบนมันจะทำเครื่องหมายที่ 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

— Matas Vaitkevicius
แหล่งที่มา

7

โปรดทราบว่าในตัวเลือกแอททริบิวต์ (เช่น, [attr~=value]) ตัวหนอน

แสดงให้เห็นถึงองค์ประกอบที่มีชื่อแอตทริบิวต์ของattrมีค่าเป็นรายการที่คั่นด้วยช่องว่างของคำหนึ่งซึ่งเป็นสิ่งที่คุ้มค่า

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

— เอียนฮันเตอร์
แหล่งที่มา