• งานที่กำลังดำเนินการคือการเลือกองค์ประกอบลูก
• สัญลักษณ์เป็นแบบลูกโซ่: ตัวเลือกพาเรนต์แบบธรรมดา, ตัวผสม ">", ตัวเลือกลูกแบบง่าย
• ตัวอย่างการใช้งาน:

มาตั้งค่าการเยื้องด้านซ้ายสำหรับรายการที่ซ้อนกันโดยตรงในองค์ประกอบที่มีคลาสเนื้อหา (กฎเหล่านี้จะไม่ส่งผลกระทบต่อรายการของระดับการซ้อนที่สอง):

เนื้อหา > ul ( ขอบซ้าย: 20px; )

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกองค์ประกอบลูก

ความแตกต่างที่สำคัญระหว่างตัวเลือกองค์ประกอบลูกกับตัวเลือกที่กล่าวถึงก่อนหน้านี้คือความจริงที่ว่าในขณะที่ตัวเลือกย่อยจะเลือกลูกหลานทั้งหมด โดยไม่คำนึงถึงระดับของการซ้อน ตัวเลือกลูกจะเลือกเฉพาะลูกหลานของระดับแรก - นั่นคือองค์ประกอบที่ซ้อนกันโดยตรง . ตัวอย่างเช่น ลองเขียนสิ่งนี้:

div > span ( color: #555; /* grey */ )

... และรหัสนี้:

ตัวเลือกลูกของ CSS คือตัวเลือกที่ใช้เพื่อใช้สไตล์กับองค์ประกอบเฉพาะเมื่อเป็นลูกขององค์ประกอบอื่น (พาเรนต์) เช่นเดียวกับตัวเลือกสืบทอด ตัวเลือกลูกเป็นแบบผสมและประกอบด้วยตัวเลือกแบบง่าย (คลาส ตัวระบุ ฯลฯ)

และขอย้ำอีกครั้ง หากคุณลืมว่าองค์ประกอบย่อยคืออะไร ลองจำไว้โดยดูตัวอย่างที่คุณคุ้นเคยอยู่แล้ว

<тег1> <тег2>... <тег3><тег4>...

องค์ประกอบจะกล่าวได้ว่าเป็นลูกขององค์ประกอบอื่นหากอยู่ในระดับแรกของการซ้อนอยู่ภายใน ในตัวอย่างของเรา<тег2>และ<тег3>เป็นลูกสาว<тег1>, ก<тег4>- นี่คือลูกสาวของฉัน<тег3> .

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

ตัวเลือก 1 > ตัวเลือก 2 (

จะเว้นวรรคทั้งสองด้านของเครื่องหมาย ">" ก็ได้ แล้วแต่ต้องการ

ตัวอย่างการใช้ตัวเลือกลูก CSS

ผลลัพธ์ในเบราว์เซอร์

วรรค 1

วรรค 2

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

Internet Explorer 6.0 ไม่เข้าใจตัวเลือกลูก ดังนั้นหากคุณกำลังสร้างไซต์โดยคำนึงถึงเบราว์เซอร์รุ่นเก่านี้ โปรดจำไว้เสมอ

ตัวเลือกลูกในตาราง HTML

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

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

ตาราง > tr > td ( คุณสมบัติ: มูลค่า; คุณสมบัติ: มูลค่า; -

คุณเดาได้ไหมว่าทำไมมันถึงผิด? เลขที่? ความจริงก็คือคุณลืมอีกหนึ่งองค์ประกอบ - ซึ่งแม้ว่าจะไม่ได้ระบุอย่างชัดเจน แต่ก็ยังปรากฏอยู่ในตาราง HTML ทุกตารางอย่างมองไม่เห็น เพียงแต่ไม่มีแท็กเปิดและปิดที่จำเป็น ดังนั้นจึงมักถูกลืมไป โดยวิธีการใช่ใน กวดวิชา HTMLเราไม่ได้ผ่านมันไป เพราะในความเป็นจริงแล้ว การบ่งชี้ที่ชัดเจนนั้นแทบจะไม่จำเป็นเลย ฉันคิดว่าคุณเดาแล้วว่ารายการที่ถูกต้องจะเป็นอย่างไร แต่ฉันจะแสดงให้คุณดูต่อไป

ตาราง > tbody > tr > td ( คุณสมบัติ: มูลค่า; คุณสมบัติ: มูลค่า; -

อย่างไรก็ตาม ไม่เพียงแต่ตารางเท่านั้นที่มีองค์ประกอบที่มีแท็กเปิดเพิ่มเติม แต่ยังมีองค์ประกอบดังกล่าวด้วย ในทางปฏิบัติ "ปัญหาการหลงลืม" มักเกิดขึ้นกับโต๊ะ ซึ่งเป็นสาเหตุที่ฉันดึงความสนใจของคุณมาที่นี่

การบ้าน.

1. ตั้งค่าหน้าเป็นแบบอักษร Arial ขนาด 0.9em และพื้นหลังบางส่วน
2. เขียนหัวเรื่องและย่อหน้าหลายๆ หัวเรื่องบนหน้า เปลี่ยนขนาดและสีของข้อความหัวเรื่องตามที่เห็นสมควร
3. ตรวจสอบให้แน่ใจว่าลิงก์โดยตรงในย่อหน้าของหน้าเป็นสีน้ำเงินโดยไม่ต้องขีดเส้นใต้ แต่ในขณะเดียวกัน หากลิงก์มีแท็กเพิ่มเติมในกรอบ เช่น ตัวเอียง ลิงก์เหล่านั้นก็ควรแสดงด้วยการขีดเส้นใต้และเป็นสีแดง ฉันขอย้ำอีกครั้งว่าคุณไม่จำเป็นต้องระบุสไตล์ลิงก์ให้กับแต่ละแท็กเฟรมแยกกัน ทำให้เป็นสากล ยังไง? ลองคิดดูสิ
4. สร้างเมนูเล็กๆ ทางด้านขวาของหน้าและแก้ไข โดยคุณจะต้องมีทรัพย์สินและคุณสมบัติอีกสองสามอย่างควบคู่ไปด้วย คุณจะเข้าใจเอง ในเวลาเดียวกัน ให้เมนูไม่เพียงแต่คงอยู่ในหน้าต่างเบราว์เซอร์เท่านั้น แต่ยังไม่ต้องคืบคลานเข้าไปในเนื้อหาของหน้าเมื่อเลื่อน

ฉันคิดว่าประเด็นสุดท้ายของบทเรียนจะยากที่สุดสำหรับคุณ แต่อย่าพยายามดื่มด่ำกับการวางตำแหน่งอย่างเชี่ยวชาญทันที แค่ทำการบ้านของคุณ อย่างไรก็ตามรายการนี้จะไม่ทำงานใน Internet Explorer 6.0 เนื่องจากชายชราไม่เข้าใจตำแหน่งคงที่

แอปพลิเคชันเว็บที่ซับซ้อนและหนักหน่วงกลายเป็นเรื่องปกติในทุกวันนี้ ข้ามเบราว์เซอร์และไลบรารีที่ใช้งานง่ายเช่น jQuery พร้อมฟังก์ชันการทำงานที่หลากหลายสามารถช่วยในการจัดการ DOM ได้ทันที ดังนั้นจึงไม่น่าแปลกใจที่นักพัฒนาจำนวนมากใช้ไลบรารีดังกล่าวบ่อยกว่าการทำงานกับ DOM API ดั้งเดิมซึ่งมีปัญหามากมาย แม้ว่าความแตกต่างของเบราว์เซอร์ยังคงเป็นปัญหาอยู่ แต่ DOM ก็มีรูปร่างที่ดีขึ้นกว่าเมื่อ 5-6 ปีที่แล้วเมื่อ jQuery ได้รับความนิยม

ในบทความนี้ ฉันจะสาธิตความสามารถในการจัดการ HTML ของ DOM โดยเน้นที่ความสัมพันธ์ระหว่างผู้ปกครอง ลูก และเพื่อนบ้าน โดยสรุป ฉันจะให้ข้อมูลเกี่ยวกับการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติเหล่านี้ แต่โปรดจำไว้ว่าไลบรารีเช่น jQuery ยังคงเป็นตัวเลือกที่ดีเนื่องจากมีข้อบกพร่องและไม่สอดคล้องกันในการใช้งานฟังก์ชันดั้งเดิม

การนับโหนดลูก

ฉันจะใช้มาร์กอัป HTML ต่อไปนี้สำหรับการสาธิตนี้ และเราจะเปลี่ยนแปลงสองสามครั้งตลอดทั้งบทความ:

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

วาร์ myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

อย่างที่คุณเห็นผลลัพธ์จะเหมือนกันแม้ว่าเทคนิคที่ใช้จะแตกต่างกันก็ตาม ในกรณีแรกฉันใช้ทรัพย์สินของเด็ก นี่เป็นคุณสมบัติแบบอ่านอย่างเดียวและส่งกลับคอลเลกชันขององค์ประกอบ HTML ที่มีอยู่ภายในองค์ประกอบที่ร้องขอ ในการนับจำนวน ฉันใช้คุณสมบัติความยาวของคอลเลกชันนี้

ในตัวอย่างที่สอง ฉันกำลังใช้เมธอด childElementCount ซึ่งฉันคิดว่าเป็นวิธีที่เรียบร้อยกว่าและอาจบำรุงรักษาได้มากกว่า (พูดคุยเรื่องนี้เพิ่มเติมในภายหลัง ฉันไม่คิดว่าคุณจะมีปัญหาในการทำความเข้าใจว่ามันทำอะไร)

ฉันสามารถลองใช้ childNodes.length (แทน children.length) แต่ดูผลลัพธ์:

วาร์ myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

ส่งคืน 13 เนื่องจาก childNodes คือชุดของโหนดทั้งหมด รวมถึงช่องว่างด้วย โปรดคำนึงถึงสิ่งนี้หากคุณสนใจความแตกต่างระหว่างโหนดย่อยและโหนดองค์ประกอบย่อย

ตรวจสอบการมีอยู่ของโหนดลูก

หากต้องการตรวจสอบว่าองค์ประกอบมีโหนดย่อยหรือไม่ ฉันสามารถใช้เมธอด hasChildNodes() ได้ วิธีการส่งกลับค่าบูลีนที่บ่งชี้ว่ามีหรือไม่มี:

วาร์ myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // จริง

ฉันรู้ว่ารายการของฉันมีโหนดย่อย แต่ฉันสามารถเปลี่ยน HTML เพื่อไม่ให้มีโหนดย่อยได้ ตอนนี้มาร์กอัปมีลักษณะดังนี้:

และนี่คือผลลัพธ์ของการรัน hasChildNodes() อีกครั้ง:

Console.log(myList.hasChildNodes()); // จริง

วิธีการยังคงคืนค่าจริง แม้ว่ารายการจะไม่มีองค์ประกอบใดๆ แต่ก็มีช่องว่างซึ่งเป็นประเภทโหนดที่ถูกต้อง วิธีการนี้จะคำนึงถึงโหนดทั้งหมด ไม่ใช่แค่โหนดองค์ประกอบเท่านั้น เพื่อให้ hasChildNodes() คืนค่าเท็จ เราจำเป็นต้องเปลี่ยนมาร์กอัปอีกครั้ง:

และตอนนี้ผลลัพธ์ที่คาดหวังจะแสดงในคอนโซล:

Console.log(myList.hasChildNodes()); // เท็จ

แน่นอน หากฉันรู้ว่าอาจพบกับช่องว่าง ฉันจะตรวจสอบการมีอยู่ของโหนดย่อยก่อน จากนั้นใช้คุณสมบัติ nodeType เพื่อพิจารณาว่ามีโหนดองค์ประกอบใดๆ อยู่ในนั้นหรือไม่

การเพิ่มและการลบองค์ประกอบย่อย

มีเทคนิคต่างๆ ที่คุณสามารถใช้เพื่อเพิ่มและลบองค์ประกอบออกจาก DOM สิ่งที่มีชื่อเสียงที่สุดนั้นมาจากการผสมผสานระหว่างเมธอด createElement() และ appendChild()

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

ในกรณีนี้ฉันสร้าง

ใช้เมธอด createElement() แล้วเพิ่มลงใน body มันง่ายมาก และคุณคงเคยใช้เทคนิคนี้มาก่อน

แต่แทนที่จะแทรกองค์ประกอบที่สร้างขึ้นเป็นพิเศษ ฉันยังสามารถใช้ appendChild() และย้ายองค์ประกอบที่มีอยู่ได้ สมมติว่าเรามีมาร์กอัปต่อไปนี้:

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

ข้อความตัวอย่าง

ฉันสามารถเปลี่ยนตำแหน่งของรายการด้วยรหัสต่อไปนี้:

Var myList = document.getElementById("myList"), คอนเทนเนอร์ = document.getElementById("c"); คอนเทนเนอร์ appendChild (myList);

DOM สุดท้ายจะมีลักษณะดังนี้:

ข้อความตัวอย่าง

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

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

ฉันยังสามารถลบองค์ประกอบลูกออกจาก DOM ได้อย่างสมบูรณ์โดยใช้ RemoveChild() ต่อไปนี้เป็นวิธีลบรายการของเราออกจากตัวอย่างก่อนหน้านี้:

Var myList = document.getElementById("myList"), คอนเทนเนอร์ = document.getElementById("c"); คอนเทนเนอร์removeChild(myList);

ตอนนี้องค์ประกอบได้ถูกลบออกแล้ว เมธอด RemoveChild() ส่งคืนองค์ประกอบที่ถูกลบออก เพื่อให้ฉันสามารถบันทึกได้ในกรณีที่ฉันต้องการในภายหลัง

วาร์ myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

นอกจากนี้ยังมี ChildNode.remove() วิธีการที่เพิ่งเพิ่มเข้าไปในข้อกำหนด:

วาร์ myList = document.getElementById("myList"); myList.remove();

วิธีนี้ไม่ส่งคืนวัตถุระยะไกลและไม่ทำงานใน IE (Edge เท่านั้น) และทั้งสองวิธีจะลบโหนดข้อความในลักษณะเดียวกับโหนดองค์ประกอบ

การแทนที่องค์ประกอบลูก

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

ข้อความตัวอย่าง

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "ตัวอย่าง"; myDiv.appendChild(document.createTextNode("ข้อความองค์ประกอบใหม่")); document.body.replaceChild(myDiv, myPar);

ข้อความองค์ประกอบใหม่

ดังที่คุณเห็นแล้วว่าเมธอด replacementChild() รับอาร์กิวเมนต์สองตัว: องค์ประกอบใหม่และองค์ประกอบเก่าที่แทนที่

ฉันยังสามารถใช้วิธีนี้เพื่อย้ายองค์ประกอบที่มีอยู่ได้ ลองดูที่ HTML ต่อไปนี้:

ข้อความตัวอย่างที่ 1

ตัวอย่างข้อความที่ 2

ตัวอย่างข้อความที่ 3

ฉันสามารถแทนที่ย่อหน้าที่สามด้วยย่อหน้าแรกได้โดยใช้รหัสต่อไปนี้:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

ตอนนี้ DOM ที่สร้างขึ้นมีลักษณะดังนี้:

ตัวอย่างข้อความที่ 2

ข้อความตัวอย่างที่ 1

คัดเลือกเด็กโดยเฉพาะ

มีหลายวิธีในการเลือกองค์ประกอบเฉพาะ ดังที่แสดงไว้ก่อนหน้านี้ ฉันสามารถเริ่มต้นด้วยการใช้คอลเลกชันย่อยหรือคุณสมบัติ childNodes แต่ลองดูตัวเลือกอื่น:

คุณสมบัติ firstElementChild และ LastElementChild ทำตามชื่อที่แนะนำ: เลือกองค์ประกอบลูกแรกและสุดท้าย กลับไปที่มาร์กอัปของเรา:

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

ฉันสามารถเลือกองค์ประกอบแรกและองค์ประกอบสุดท้ายโดยใช้คุณสมบัติเหล่านี้:

วาร์ myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "ตัวอย่างหนึ่ง" console.log(myList.lastElementChild.innerHTML); // "ตัวอย่างที่หก"

ฉันยังสามารถใช้คุณสมบัติ PreviousElementSibling และ NextElementSibling ได้ หากฉันต้องการเลือกองค์ประกอบลูกอื่นที่ไม่ใช่องค์ประกอบแรกหรือสุดท้าย ซึ่งทำได้โดยการรวมคุณสมบัติ firstElementChild และ LastElementChild:

วาร์ myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "ตัวอย่างที่สอง" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "ตัวอย่างที่ห้า"

นอกจากนี้ยังมีคุณสมบัติที่คล้ายกัน firstChild , LastChild , PreviousSibling และ nextSibling แต่จะคำนึงถึงโหนดทุกประเภท ไม่ใช่แค่องค์ประกอบ โดยทั่วไป คุณสมบัติที่พิจารณาเฉพาะโหนดองค์ประกอบจะมีประโยชน์มากกว่าคุณสมบัติที่เลือกโหนดทั้งหมด

การแทรกเนื้อหาลงใน DOM

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

ประการแรก มีเมธอด insertBefore() ธรรมดาๆ เหมือนกับการแทนที่Child() โดยต้องใช้อาร์กิวเมนต์สองตัวและใช้ได้กับทั้งองค์ประกอบใหม่และองค์ประกอบที่มีอยู่ นี่คือมาร์กอัป:

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

ย่อหน้าตัวอย่าง

สังเกตย่อหน้าที่ฉันจะลบออกก่อน จากนั้นจึงแทรกไว้หน้ารายการ ทั้งหมดในคราวเดียว:

Var myList = document.getElementById("myList"), คอนเทนเนอร์ = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

ในผลลัพธ์ HTML ย่อหน้าจะปรากฏก่อนรายการและเป็นอีกวิธีหนึ่งในการล้อมองค์ประกอบ

ย่อหน้าตัวอย่าง

• ตัวอย่างที่หนึ่ง
• ตัวอย่างที่สอง
• ตัวอย่างที่สาม
• ตัวอย่างที่สี่
• ตัวอย่างที่ห้า
• ตัวอย่างที่หก

เช่นเดียวกับการแทนที่เด็ก() , insertBefore() รับสองอาร์กิวเมนต์: องค์ประกอบที่จะเพิ่มและองค์ประกอบก่อนที่เราต้องการแทรก

วิธีนี้ง่าย ตอนนี้เรามาลองใช้วิธีการแทรกที่มีประสิทธิภาพมากขึ้น: วิธีการ insertAdjacentHTML()

วลาด เมอร์เซวิช

องค์ประกอบลูกคือองค์ประกอบที่อยู่ภายในองค์ประกอบหลักโดยตรง เพื่อให้เข้าใจความสัมพันธ์ระหว่างองค์ประกอบของเอกสารได้ดีขึ้น ลองดูโค้ดเล็กๆ น้อยๆ (ตัวอย่าง 12.1)

ตัวอย่างที่ 12.1 การซ้อนองค์ประกอบในเอกสาร

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor นั่งด้วยกัน, ผู้รับบำนาญ adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud การออกกำลังกาย tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

ข้าว. 12.1. ตัวอย่างแผนผังองค์ประกอบ

ในรูป รูปที่ 12.1 นำเสนอการซ้อนองค์ประกอบและลำดับชั้นในรูปแบบที่สะดวก

นี่คือองค์ประกอบลูกของแท็ก

แท็กยื่นออกมา อย่างไรก็ตามแท็ก

ไม่ใช่ลูกของแท็ก

เนื่องจากอยู่ในคอนเทนเนอร์

กลับมาที่ตัวเลือกกันตอนนี้ ตัวเลือกลูกคือตัวเลือกที่อยู่ภายในองค์ประกอบหลักในแผนผังองค์ประกอบโดยตรง ไวยากรณ์สำหรับการใช้ตัวเลือกดังกล่าวมีดังนี้

ตัวเลือก 1 > ตัวเลือก 2 (คำอธิบายกฎสไตล์)

สไตล์จะถูกนำไปใช้กับตัวเลือก 2 แต่เฉพาะในกรณีที่เป็นลูกของตัวเลือก 1 เท่านั้น ย้อนกลับไปที่ตัวอย่างที่ 12.1 รูปแบบมุมมอง P > EM ( สี: สีแดง ) จะถูกตั้งค่าเป็นย่อหน้าแรกของเอกสารเนื่องจากแท็ก

อยู่ภายในภาชนะ และจะไม่ให้ผลลัพธ์ใด ๆ สำหรับย่อหน้าที่สอง และทั้งหมดเป็นเพราะแท็ก ในวรรคสองให้อยู่ในภาชนะ

ดังนั้นสภาพการทำรังจึงถูกละเมิด

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor นั่งด้วยกันตัวอย่างที่ 12.2 ตัวเลือกตามบริบทและลูก , ผู้รับบำนาญ adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreetโดโลเร แม็กนา

อลิกวม ยุคัต โวลุตพัทธ์.

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 12.2.

ข้าว. 12.2. ตั้งค่าสีข้อความโดยใช้ตัวเลือกลูก เพื่อแท็ก ในตัวอย่าง กฎสองข้อทำงานพร้อมกัน: ตัวเลือกบริบท (tag

ตั้งอยู่ภายใน ) และตัวเลือกลูก (tag

เป็นบริษัทในเครือของ

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

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

ตัวอย่าง 12.3 แสดงการเปลี่ยนรูปลักษณ์ของรายการโดยใช้สไตล์ โดยการซ้อนรายการหนึ่งเข้ากับอีกรายการหนึ่ง เราจะได้เมนูประเภทหนึ่ง ในกรณีนี้ส่วนหัวจะอยู่ในแนวนอนและชุดลิงก์จะอยู่ในแนวตั้งใต้ส่วนหัว (รูปที่ 12.3)

ข้าว. 12.3. รายการเป็นเมนู

หากต้องการวางตำแหน่งข้อความในแนวนอน คุณสมบัติรูปแบบลอยตัวจะถูกเพิ่มลงในตัวเลือก LI เพื่อแยกสไตล์ของรายการแนวนอนและแนวตั้ง จะใช้ตัวเลือกลูก (ตัวอย่าง 12.3)

HTML5 CSS 2.1 IE Cr Op Sa Fx

• ตัวอย่างที่ 12.3 การใช้ตัวเลือกลูก
  • แก้ไข
  • ยกเลิก
  • ตัด
  • สำเนา
• แทรก
  • แบบอักษร
  • ตัวหนา
  • ตัวเอียง
• ขีดเส้นใต้
  • ขนาด
  • เล็ก
  • ปกติ
  • เฉลี่ย

ใหญ่

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

คำถามที่ต้องตรวจสอบ

1. ข้อความตัวหนาตัวเอียงในโค้ดจะมีสีอะไร มาตรฐานการส่องสว่างจะขึ้นอยู่กับขึ้นอยู่กับการจำแนกประเภทของงานภาพ

ตามลักษณะเชิงปริมาณบางประการ

เมื่อใช้สไตล์ต่อไปนี้?
P ( สี : เขียว ; )
B (สี: ฟ้า; )
ฉัน (สี: ส้ม; )
B > ฉัน ( สี: มะกอก; )

1. P > I ( สี: เหลือง; )
2. สีเขียว.
3. สีฟ้า.
4. ส้ม.
5. มะกอก.

สีเหลือง.

องค์ประกอบลูก ย่อหน้าและในนั้นอ้วน องค์ประกอบ และนี่คือโน้มเอียง

องค์ประกอบ. ย่อหน้าและในนั้นที่นี่ และขีดเส้นใต้และเฉียง

องค์ประกอบ , และ รหัสนี้มีสองย่อหน้า มีองค์ประกอบแบบอินไลน์ภายในย่อหน้า - ในย่อหน้าที่สองแท็ก .

ซ้อนอยู่ในแท็ก

ตอนนี้เรามาเพิ่มสไตล์ CSS ให้กับโค้ด html นี้โดยใช้ตัวเลือกลูก

ไวยากรณ์สำหรับตัวเลือกลูก:

ตัวเลือก 1 > ตัวเลือก 2 ( คุณสมบัติ: ค่า; )

องค์ประกอบลูก ย่อหน้าและในนั้นอ้วน องค์ประกอบ และนี่คือโน้มเอียง

องค์ประกอบ. ย่อหน้าและในนั้นที่นี่ และขีดเส้นใต้และเฉียง

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

และวินาทีนั้นก็ซ้อนอยู่ในแท็ก แม้ว่าจะเป็นลูกของแท็กก็ตาม

ดังนั้นในย่อหน้าที่สอง กฎ CSS สำหรับตัวเลือกลูก p>i ( color : blue ; ) จะไม่ทำงาน - ข้อความตัวเอียงของย่อหน้าที่สองจะไม่แสดงเป็นสีน้ำเงิน

รูปที่ 1 ตัวอย่าง #1 ในที่ทำงาน

ไปที่องค์ประกอบ html ย่อหน้าที่สองสามารถใช้ได้โดยใช้กฎ CSS: p>u>i ( color : blue ; )

ลองใช้กฎนี้เพื่อตั้งค่าข้อความตัวเอียงของย่อหน้าที่สองให้เป็นสีเหลือง

องค์ประกอบลูก ย่อหน้าและในนั้นอ้วน องค์ประกอบ และนี่คือโน้มเอียง

องค์ประกอบ. ย่อหน้าและในนั้นที่นี่ และขีดเส้นใต้และเฉียง

สไตล์นี้จะใช้งานได้และข้อความตัวเอียงในย่อหน้าที่สองจะแสดงเป็นสีเหลือง

รูปที่ 2 ตัวอย่างที่ 2 ในการใช้งานจริง

ตัวอย่างที่ซับซ้อนมากขึ้น

เรามีรหัส html:

• ตัวอย่างที่ 12.3 การใช้ตัวเลือกลูก
  • แก้ไข
  • ยกเลิก
  • ตัด
  • สำเนา
• แทรก
  • แบบอักษร
  • ตัวหนา
  • ตัวเอียง
• ขีดเส้นใต้
  • ขนาด
  • เล็ก
  • ปกติ
  • เฉลี่ย

โดยค่าเริ่มต้น จะถูกตีความดังนี้:

ความท้าทาย: ใช้ CSS เปลี่ยนรายการนี้ให้เป็นเมนูแนวนอน

รูปที่ 3 เป้าหมายของการเปลี่ยนแปลง

ต่อไปนี้เป็นวิธีแก้ไขปัญหานี้โดยใช้ตัวเลือกลูก:

• ตัวอย่างที่ 12.3 การใช้ตัวเลือกลูก
  • แก้ไข
  • ยกเลิก
  • ตัด
  • สำเนา
• แทรก
  • แบบอักษร
  • ตัวหนา
  • ตัวเอียง
• ขีดเส้นใต้
  • ขนาด
  • เล็ก
  • ปกติ
  • เฉลี่ย

เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับตัวอย่างนี้ โปรดอ่านต่อ