CSS Descendant Selector คืออะไร?

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

CSS ลูกศร Selectors

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

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

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

  จะเป็น parent
  • จะเป็นลูกของ element และ จะเป็นลูกของ
  • และหลานของ

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

    li a {text-decoration: none; }

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

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

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

      ถ้าคุณต้องการเลือก 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 ที่มีตัวเลือกที่สุดเหวี่ยง ใหญ่.