מהו בורר CSS צאצא?

המבנה של מסמך HTML דומה לעץ המשפחה. במשפחה שלך, יש לך את ההורים שלך ואחרים שבאו לפניך. אלה הם אבותיך. ילדים ואלה הבאים אחריך על העץ הזה הם צאצאיך. HTML עובד באופן דומה. אלמנטים שנמצאים בתוך אלמנטים אחרים הם צאצאיהם. לדוגמה, מכיוון שכמעט כל אלמנט HTML הוא בתוך תגי , הם יהיו צאצא של אלמנטים . מערכת יחסים זו חשובה להבנה כאשר אתה מתחיל לעבוד עם CSS ועליך למקד אלמנטים ספציפיים כדי להחיל סגנונות חזותיים.

בוררי CSS

בורר CSS צאצא חל על האלמנטים הנמצאים בתוך אלמנט אחר (או יותר מדויק, אלמנט שהוא צאצא של אלמנט אחר). לדוגמה, רשימה לא מסודרת כוללת תג עם תגים כצאצאים. נשתמש ב- HTML הבא כדוגמה:

• זהו קישור

  תגי LI הם צאצאי תג UL. תג A הוא צאצא של שניהם LI (צאצא הילד) ו UL (צאצא נכדים) תגים. אם אתה חושב על זה באמצעות דוגמה עץ המשפחה,

  יהיה ההורה,
  • יהיה זה הילד של הילד, ואת יהיה הילד של
  • ואת הנכד של
    .

    אז איך היית למקד אלמנטים ספציפיים בדף אינטרנט באמצעות אלה בוררים צאצא? ראשית, עליך להגדיר בוררי צאצאים באמצעות שני בוררים מסוג (או יותר) המופרדים על ידי רווחים.

    li a {text-decoration: none; }

    בדוגמה זו, הסגנונות יחולו רק על אלמנט קישור () שהוא צאצא של אלמנט פריט-רשימה (

    • ). כל שאר הקישורים בדף שאינם צאצא של פריט רשימה לא יקבלו סגנון זה.

      דבר אחד חשוב לזכור כי זה לא משנה כמה תגים הם בין התגים ייתכן שאתה משתמש בורר צאצא שלך. אם האלמנט השני מוקף בכל מקום בתוך האלמנט הראשון הוא ייבחר כצאצא.

      אם אתה רוצה לבחור את כל עוגנים כי הם ירדו מ אלמנטים, היית כותב:

      ul a {text-decoration: none; }

      עכשיו, סגנונות אלה יחולו על כל קישור שהוא צאצא של פריט רשימה. תוכל גם לכתוב בורר זה

      סוללת Li ul {text-decoration: none; }

      זהו בורר צאצא המשתמש ביותר משני בוררי סוג. במקרה זה, זה יחול על הקישורים שנמצאים בתוך הרשימה כמו פריט וגם בתוך רשימה לא מסודרים.

      שימוש בבוררי מחלקות ומבחני זיהוי

      סלקטורים שאתה יורד לא צריך תמיד להיות צאצאי סוג. לדוגמה, נניח שיש לך שטח של האתר (כמו חלוקה) עם תכונה מזהה של "לוח מודעות". אתה יכול להגדיר בורש צאצא של תעודת הזהות:

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

      זה היה סגנון רשימת unordered כי הוא צאצא של אלמנט עם תעודת "לוח מודעות". אתה יכול לעשות את אותו הדבר עבור ערכי המחלקה.

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

      זה מניח כי חלוקת יש ערך בכיתה של "לוח מודעות". CSS לעיל יהיה סגנון אלמנט

      בתוך כל חלוקה שיש לו ערך זה בכיתה.

      אתה יכול לקבל ממש כבד ביד ו verbose עם בוררים צאצא. לדוגמה, אם אתה משתמש ב- Dreamweaver לכתוב את קוד ה- HTML , קיימת הגדרה בעת הוספת כללי CSS חדשים שיצרו אוטומטית את הבורר בהתאם למיקום הסמן בדף זה. מה ש- Dreamweaver עושה במקרים אלה הוא ליצור בורר פראי וארוך. זה הרבה סגוליות לא הכרחי עבור CSS שלך לעבוד. מה שאתה רוצה לעשות הוא למצוא איזון בין בורר צאצא כי הוא ספציפי מספיק, כך שאתה יכול לתחקר את האלמנטים המדויקים שאתה צריך (ללא סגנון אלה שאתה לא רוצה להשפיע) ללא כללים CSS כי יש בוררים כי הם overly גָדוֹל.