1. ตัวเลือกพี่น้องสามัญของ CSS อ้างถึงองค์ประกอบทั้งหมดที่เชื่อมต่อกับองค์ประกอบอื่น ซึ่งทั้งสององค์ประกอบมีองค์ประกอบหลักที่เหมือนกัน
2. ผู้เลือกพี่ชายสามัญใช้เครื่องหมายตัวหนอน (~) เป็นสัญลักษณ์การรวมสำหรับพี่น้องธรรมดา
ตัวอย่าง
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>ตัวเลือกพี่น้องทั่วไป</title>
<สไตล์>
.บรรพบุรุษ {
ความกว้าง: 500px;
ความสูง: 300px;
-
.พ่อแม่ {
ความกว้าง: 300px;
ความสูง: 200px;
-
.เด็ก {
ความกว้าง: 200px;
ความสูง: 100px;
-
/* วางตำแหน่งองค์ประกอบที่มีพี่น้องเป็น div หลัง .child1*/
.child1~div {
สีพื้นหลัง: lightcoral;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div>
นี่คือบรรพบุรุษ
<div>
นี่คือผู้ปกครอง
<div>นี่คือ child0</div>
<div>นี่คือลูก1</div>
<div>นี่คือลูก2</div>
<div>นี่คือลูก3</div>
</div>
</div>
</ร่างกาย>
</html>
ข้างต้นคือความเข้าใจเกี่ยวกับ CSS สามัญตัวเลือกพี่น้อง ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
คู่มือการเรียนรู้ CSS เพิ่มเติม: บทช่วยสอน CSS