ความแตกต่างระหว่างตัวเลือก div + p (บวก) และ div ~ p (ทิลเดอ)

วิธีที่w3schools ใช้วลีนั้นฟังดูเหมือนกัน

การอ้างอิง CSS ของ W3Schools

div + p
เลือก<p>องค์ประกอบทั้งหมดที่วางไว้หลัง<div>องค์ประกอบ

div ~ p
เลือกทุก<p>องค์ประกอบที่นำหน้าด้วย<div>องค์ประกอบ

ถ้า<p>องค์ประกอบอยู่หลังองค์ประกอบทันที<div>นั่นหมายความว่า<p>องค์ประกอบนั้นอยู่ข้างหน้าด้วย<div>องค์ประกอบหรือไม่?

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

ตัวเลือกพี่น้องที่อยู่ติดกัน X + Y

ตัวเลือกพี่น้องที่อยู่ติดกันมีไวยากรณ์ต่อไปนี้: E1 + E2 โดยที่ E2 เป็นหัวเรื่องของตัวเลือก ตัวเลือกจะจับคู่หาก E1 และ E2 แชร์พาเรนต์เดียวกันในโครงสร้างเอกสารและ E1 นำหน้า E2 ทันทีโดยไม่สนใจโหนดที่ไม่ใช่องค์ประกอบ (เช่นโหนดข้อความและข้อคิดเห็น)

ul + p {
   color: red;
}

ในตัวอย่างนี้จะเลือกเฉพาะองค์ประกอบที่นำหน้าด้วยองค์ประกอบเดิมทันที ในกรณีนี้เฉพาะย่อหน้าแรกหลังแต่ละ ul จะมีข้อความสีแดง

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

ตัวเลือกพี่น้องทั่วไป X ~ Y

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

ul ~ p {
   color: red;
}

Combinator พี่น้องนี้คล้ายกับ X + Y แต่ก็เข้มงวดน้อยกว่า ในขณะที่ตัวเลือกที่อยู่ติดกัน (ul + p) จะเลือกเฉพาะองค์ประกอบแรกที่นำหน้าโดยตัวเลือกเดิมทันที แต่อันนี้มีลักษณะทั่วไปมากกว่า มันจะเลือกโดยอ้างถึงตัวอย่างของเราด้านบนองค์ประกอบ p ใด ๆ ตราบเท่าที่พวกเขาเป็นไปตาม ul

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

ที่มา

code.tutsplus

ตัวเลือกพี่น้องทั่วไป MDN

ตัวเลือกพี่น้องที่อยู่ติดกัน w3

ถ้า<p>องค์ประกอบอยู่หลังองค์ประกอบทันที<div>นั่นหมายความว่า<p>องค์ประกอบนั้นอยู่ข้างหน้าด้วย<div>องค์ประกอบหรือไม่?

นี่คือความถูกต้อง ในคำอื่น ๆdiv + pเป็นเซตย่อยที่เหมาะสมของdiv ~ p- อะไรจับคู่โดยอดีตยังจับคู่โดยหลังโดยความจำเป็น

ความแตกต่างระหว่าง+และ~คือ~ตรงกับพี่น้องที่ติดตามทั้งหมดโดยไม่คำนึงถึงความใกล้ชิดจากองค์ประกอบแรกตราบใดที่ทั้งคู่มีพ่อแม่เดียวกัน

จุดทั้งสองนี้แสดงให้เห็นอย่างรวบรัดที่สุดด้วยตัวอย่างเดียวโดยที่กฎแต่ละข้อใช้คุณสมบัติที่แตกต่างกัน สังเกตว่าสิ่งpที่ปฏิบัติตามทันทีdivมีการใช้กฎทั้งสอง:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

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

แต่น่าเสียดายที่มีไม่ได้เป็นหนึ่งเลย

ลองพิจารณาตัวอย่างนี้:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

1) ตัวเลือกพี่น้องที่อยู่ติดกัน (S1 + S2)

ตัวเลือกพี่น้องที่อยู่ติดกันใช้เพื่อเลือกองค์ประกอบที่ระบุซึ่งอยู่ถัดจากองค์ประกอบอื่นที่ระบุ องค์ประกอบทั้งสองควรอยู่ในระดับเดียวกัน

div + p {
    color:red;
}

ตัวอย่าง Sibling Selectors ที่อยู่ติดกัน

2) ตัวเลือกพี่น้องทั่วไป (S1 ~ S2)

ตัวเลือกพี่น้องทั่วไปใช้เพื่อเลือกองค์ประกอบพี่น้องที่ระบุทั้งหมดขององค์ประกอบอื่นที่ระบุ

div ~ p {
   color:red;
}

ตัวอย่าง General Sibling Selectors

ตัวเลือกพี่น้องที่อยู่ติดกัน (S1 + S2) เทียบกับพี่น้องทั่วไป (S1 ~ S2):

ตัวเลือกพี่น้องที่อยู่ติดกัน (S1 + S2) จะเลือกองค์ประกอบพี่น้องในทันทีเท่านั้น แต่ตัวเลือกพี่น้องทั่วไป (S1 ~ S2) จะเลือกองค์ประกอบพี่น้องทั้งหมดขององค์ประกอบอื่นที่ระบุ ทั้งสองกรณีองค์ประกอบทั้งสอง (S1 และ S2) ควรอยู่ในระดับเดียวกัน

ตัวเลือกที่เหลือมีคำอธิบายที่นี่: https://www.csssolid.com/35-css-selectors-to-remember.html