ค้นหาสิ่งที่ CSS Descendant Selector อยู่

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

CSS ลูกศร Selectors

ตัวเลือกลูกหลาน CSS ใช้กับองค์ประกอบภายในองค์ประกอบอื่น (หรือระบุองค์ประกอบที่เป็นลูกหลานขององค์ประกอบอื่น) ตัวอย่างเช่นรายการที่ไม่มีลำดับแล้วมีแท็กที่มีแท็กเป็นลูกหลาน ลองใช้ HTML ต่อไปนี้เป็นตัวอย่าง:

• นี่คือลิงค์

LI แท็กเป็นลูกหลานของ UL แท็ก แท็กเป็นลูกหลานของ ทั้งสอง LI (ลูกหลาน) และ UL (ลูกหลานหลาน) แท็ก ถ้าคุณคิดถึงเรื่องนี้โดยใช้ตัวอย่างต้นไม้ครอบครัว

จะเป็นพ่อแม่
• จะเป็นเด็กขององค์ประกอบและจะเป็นลูกของ
• และหลานของ
  .

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

  li a {text-decoration: none; }

  ในตัวอย่างนั้นรูปแบบจะใช้เฉพาะกับองค์ประกอบ link () ซึ่งเป็นลูกหลานขององค์ประกอบ element-list (

  • ) ลิงก์อื่น ๆ ทั้งหมดบนหน้าเว็บที่ไม่ใช่ลูกหลานของรายการจะไม่ได้รับสไตล์นี้

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

    ถ้าคุณต้องการเลือก anchor ทั้งหมดที่สืบเชื้อสายมาจาก ul elements คุณจะต้องเขียน:

    ul a {text-decoration: none; }

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

    ul li a {text-decoration: none; }

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

    การใช้ตัวเลือก Class และตัวเลือก ID

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

    #billboard ul {background-color: #ccc; }

    นี่จะเป็นรูปแบบรายการที่ไม่มีลำดับที่เป็นลูกหลานขององค์ประกอบที่มี ID ของ "ป้ายโฆษณา" คุณสามารถทำเช่นเดียวกันสำหรับค่าเรียน

    div.billboard ul {background-color: #ccc; }

    สมมติว่าส่วนนี้มีค่าคลาสของ "billboard" CSS ข้างต้นจะมีสไตล์

    ภายในส่วนใด ๆ ที่มีค่าคลาสนี้

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