מבט לתוך CSS3 ראשון מסוג של בורר מבנית
דבר אחד שאני אוהב CSS3 היא תוספת חדשה של בוררים המאפשרים לנו למקד אלמנטים במיוחד ללא הסתמכות על מעמד, id או תכונה אלמנט אחר, ואחד שאנו יכסה כאן הוא בורר הבא, : ראשון מסוגו.
ה : ראשון מסוגו בחירה תכוון את הילד הראשון של האלמנט שצוין, לדוגמה, קטע הקוד להלן ימקד את הראשון h2 בדף האינטרנט.
h2: הראשון מסוג / * סגנון הצהרה * /
ה : ראשון מסוגו הוא גם שווה : nth-of-type (1), אז במקום לבחור רק את ראשון של סוג, אנחנו יכולים לבחור את השני, השלישי וכן הלאה. הקטע הבא ימקד לשנייה h2 אלמנט בדף האינטרנט.
h2: nth of of type (2) / * סגנון הצהרה * /
: ראשון מסוגו” לעומת. “:ילד ראשון”
זה אולי נראה כמו שני בוררים עושים את אותו הדבר, אבל זה לא המקרה. בואו נראה את ההפגנה הבאה:
נניח שיש לנו חמישה אלמנטים פיסקאים עטופים בתוך div, ככה:
פגרף 1
פרגראף 2
פרגראף 3
פגרף 4
פרגראף 5
עכשיו, אנחנו רוצים לבחור את הפסקה הראשונה באמצעות :ילד ראשון 28.
p: ילד ראשון ריפוד: 5px 10px; border-radius: 2px; רקע: # 8960a7; צבע: #fff; border: 1px solid # 5b456a;
וכפי שציפינו, הקטע הראשון נבחר בהצלחה.
- : הילד הראשון הדגמה
עם זאת, כאשר אנו הוסף אלמנט אחר לפני את הפסקה הראשונה, נניח h1, כמו קטע הקוד להלן:
מכוון ל 1
פגרף 1
פרגראף 2
פרגראף 3
פגרף 4
פרגראף 5
לא תיבחר הפסקה הראשונה, כמו הילד הראשון בתוך div J כבר לא פסקה, אבל עכשיו הוא h1.
אז, זה המצב שבו : ראשון מסוגו בחר בא לפתור את הבעיה.
p: first of type ריפוד: 5px 10px; border-radius: 2px; רקע: # a8b700; צבע: #fff; border: 1px solid # 597500;
- : הדגמה ראשונה מסוגה
ה “אחרון” בורר
איפה יש את “ראשון”, אז יהיה גם “אחרון”.
ההפך משני הבוחרים שנידונו לעיל הם שני הסלקטורים הבאים: ה :ילד אחרון וה : האחרון מסוג. הם בעצם דומים לשני הנ"ל, אלא שהם עושים את המטרה הילד האחרון של האלמנט שצוין.
לדוגמה, קטע הקוד הבא ימקד לפסקה האחרונה בתוך ה- div.
p: הילד האחרון ריפוד: 5px 10px; border-radius: 2px; רקע: # 8960a7; צבע: #fff; border: 1px solid # 5b456a;
- : הדגמה של הילד האחרון
וגם קטע זה יהיה גם למקד את הפסקה האחרונה באותו מצב כפי שכבר דנו לעיל; הפעםod עוקב ישירות אחר אלמנט אחר.
p: אחרון מסוג ריפוד: 5px 10px; border-radius: 2px; רקע: # a8b700; צבע: #fff; border: 1px solid # 597500;
- : הדגמה האחרונה של סוג
את Selectivizr
כמו כל תכונה חדשה אחרת ב- CSS3, בוררים אלה אינם נתמכים בדפדפנים ישנים, בעיקר Internet Explorer 6 עד 8, למעט חריגה :ילד ראשון בחר, כפי שהוא הוסיף מאז CSS2.1. קרוב משפחה שלה :ילד אחרון נוספה רק ב- CSS3.
לכן, אם כל בוררים אלה שהזכרנו כאן נדרשים באמת עבור האתר שלך, אתה יכול להשתמש בספריית JavaScript שנקרא Selectivizr כדי לחקות את הפונקציונליות של בורר CSS3.
Selectivizr תלוי בספריות JavaScript אחרות כדי לעבוד, כגון jQuery, Dojo, אב טיפוס ו- MooTools; ורואה מטבלת ההשוואה באתר הרשמי, MooTools נראה מסוגל להתמודד עם כל בוררים.
אז, בואו לכלול את זה יחד עם Selectivizr, כדלקמן:
הערה מותנית לעיל יבטיח כי ספריות אלה יהיה נטען רק ב- Internet Explorer 8 ומטה.
לבסוף, אתה יכול להציג את ההדגמה מן הקישורים הבאים וזה צריך עכשיו לעבוד הן בדפדפנים המודרניים והוותיקים (IE8 ומטה). ניתן גם להוריד את קובץ המקור לבדיקה נוספת. תהנה.
- הדגמה
- הורד מקור
