מדריך סופי של CSS פסבדו כיתות
בין אם אתה טירון או מפתח CSS מנוסה, בטח שמעת על כיתות פסאודו. המעמד הידוע ביותר הוא כנראה : רחף, אשר מאפשר לנו סגנון אלמנט כאשר הוא במצב השהייה, כלומר, כאשר מכשיר מצביע, כגון עכבר, הוא הצביע על זה.
בעקבות הרעיון של ההודעות הקודמות שלנו על השוליים: Auto ו- CSS Floats, אנחנו לוקחים מבט מעמיק קרוב יותר לשיעורים מדומים בפוסט הזה. אנחנו עוד נראה מה זה כיתות מדומות באמת, איך הם עובדים, איך אנחנו יכולים לסווג אותם, ו איך הם שונים מ אלמנטים פסאודו.
מה הם פסבדו כיתות?
Pseudo בכיתה היא מילת מפתח שנוכל להוסיף בוררי CSS כדי להגדיר מצב מיוחד של אלמנט HTML השייך. אנחנו יכולים להוסיף pseudo בכיתה ל בורר CSS באמצעות תחביר המעי הגס You ככה: a: העבר בריחוף ...
מחלקה CSS היא תכונה שנוכל להוסיף אלמנטים HTML שאנחנו רוצים להחיל את הכללים סגנון זהה, כגון פריטי התפריט העליון או כותרות של יישומונים Sidebar. במילים אחרות, אנו יכולים להשתמש ב- CSS קבוצה או לסווג רכיבי HTML כי הם דומים בדרך זו או אחרת.
כיתות פסאודו דומות להן במובן שהן גם כן נהג להוסיף כללי סגנון לאלמנטים בעלי אותו מאפיין.
אבל בעוד שיעורים אמיתיים הם משתמש הוגדר ו ניתן להבחין בקוד המקור, לדוגמה ה עבודה של כיתות CSS רגילות J סיווג או אלמנטים קבוצתיים. המפתחים יודעים כיצד ניתן לקבץ את האלמנטים שלהם: הם יכולים ליצור כיתות כמו "פריטי תפריט", "לחצנים", "תמונות ממוזערות" וכו 'לקבוצה, ומאוחר יותר אלמנטים דומים בסגנון. סיווגים אלה מבוססים על מאפייני האלמנטים שניתנו על ידי היזמים עצמם. לדוגמה, אם מפתח מחליט להשתמש ב- רכיבי HTML עם זאת המאפיינים המשותפים שלהם בהתבסס על מצבם, מיקומם, טבעם ואינטראקציה שלהם עם הדף והמשתמש. אלה הם המאפיינים לא המסומן בדרך כלל בקוד ה- HTML, אבל אנחנו יכולים לכוון אותם בשיעורי פסאודו ב- CSS, לדוגמה: אלה הם סוג של מאפיינים אשר ממוקדות בדרך כלל על ידי כיתות פסאודו. כדי להבין את ההבדל בין שיעורים ופסבדו כיתות טוב יותר, נניח שאנחנו משתמשים בכיתה אנו יכולים לסדר את האלמנטים האחרונים של הילד עם CSS הבא: אבל מה קורה כאשר האלמנט האחרון משתנה? ובכן, נצטרך להעביר את זה טרחה של ניתן להשאיר את המעדכנים לסוכן המשתמש, לפחות עבור אותם מאפיינים משותפים בין אלמנטים (ולהיות אלמנט אחרון הוא נפוץ כפי שהוא יכול לקבל). לאחר מוגדר מראש ישנם סוגים רבים של pseudo- כיתות, כולם מספקים לנו דרכים למקד אלמנטים המבוססים על התכונות שלהם כי הם בדרך כלל נגיש או מסובך יותר לגשת. הנה רשימה של שיעורים פסאודו סטנדרטיים ב- MDN. כיתות פסאודו דינמיות מתווספות ומוסרות מרכיבי HTML באופן דינמי, המבוססים על המדינה שהם המעבר בתגובה לאינטראקציות של המשתמש. כמה דוגמאות של כיתות פסאודו דינמי הם שיעורי פסאודו מבוססי-מדינה מתווספים לאלמנטים כאשר הם במצב סטטי מסוים. חלק מהדוגמאות המפורסמות ביותר שלה הן: המדינה הפופולרית ביותר מבוסס pseudo בכיתה חייב להיות כיתות פסאודו מבניות מסווגות אלמנטים המבוססים על המיקום שלהם במבנה המסמך. הדוגמאות הנפוצות ביותר שלה הן ישנם גם סוגים שונים פסאודו שקשה לסווג, כגון: אחד הדברים הקשים ביותר בשיעורים פסאודו הוא כנראה להבין את ההבדל בין שתיהן הן כיתות מדומות מבניות, וסמן אלמנט מסוים בתוך אלמנט הורה (מיכל), אבל בדרך אחרת. נניח n ², בואו נסתכל על דוגמה. בואו נראה איך זה CSS קצר בסגנון HTML בשני מקרים שונים. במקרה 1, האלמנט השני בתוך אבל אם האלמנט ההורה עושה יש פסקה שנייה, בדוגמה שלנו, סעיף 1, ילד 1 סעיף 2, ילד 3 במקרה השני, אנחנו מעבירים את הרשימה הלא מסודרת למקום השלישי, והפסקה השנייה תבוא לפניה. משמעות הדבר היא כי הן סעיף 1, ילד 1 סעיף 2, ילד 2 אם אתה רוצה לקרוא יותר על ההבדלים בין כאשר אנו מדברים על כיתות פסאודו, חשוב גם להבין איך הם שונים מ אלמנטים פסאודו, כדי לא לערבב אותם. אבל בזמן שאנחנו משתמשים pseudo- שיעורים כדי לבחור אלמנטים HTML כי קיימים בעץ המסמך פשוט לא מסומן בנפרד, אלמנטים פסאודו מאפשרים לנו למקד אלמנטים אינם קיימים בדרך כלל ב DOM, או בכלל (למשל יש גם הבדל בתחביר. אלמנטים פסאודו מזוהים בדרך כלל עם קולון כפול זה יכול להוביל במקרה של בלבול כמו CSS2, אלמנטים פסאודו היו מסומנים עם נקודתיים אחת גם כן - דפדפנים עדיין לקבל את תחביר המעי הגס יחיד עבור אלמנטים פסאודו. יש גם הבדלים בין כיתות פסאודו לבין אלמנטים פסאודו את האופן שבו אנו יכולים למקד אותם עם CSS. אלמנטים פסאודו יכולים להופיע רק לאחר את רצף של בוררים, בעוד pseudo- מחלקות ניתן להציב בכל מקום ברצף CSS CSS. לדוגמה, ניתן למקד לפריט הרשימה האחרון של אלמנט רשימה כמו או הרצף הראשון של בורר בוחר את הילד האחרון בתוך בואו ננסה לעשות משהו דומה עם אלמנטים פסאודו. קוד CSS לעיל תקף, והטקסט "אדום" יופיע לאחר ה זה קוד מצד שני, לא יעבוד, כמו שאנחנו לא יכול לשנות את המיקום של אלמנט פסאודו בתוך רצף הבחירה. כמו כן, רק אחד pseudo- אלמנט יכול להופיע ליד בורר, ואילו פסאודו- class ניתן לשלב אחד עם השני אם השילוב הגיוני. לדוגמה, כדי למקד אלמנטים של הילד הראשון שגם הם לקריאה בלבד, אנו יכולים ליצור שילוב של כיתות פסאודו קוד בורר עם חשוב לדעת זאת אלו הם לא CSS פסבדו כיתות כי הם להיות ממוקד על ידי jQuery. הם נקראים הרחבות בורר jQuery. הרחבות בוררי jQuery מאפשרות לך אלמנטים HTML היעד עם מילות מפתח פשוטות יותר. רובם הם שילובים של בוררי CSS רגילים מרובים, המיוצגים עם מילת מפתח אחת.מטרה של פסבדו כיתות
.אחרון כדי לזהות את המרכיבים האחרונים במכולות האב השונות.
li.last text-transform: uppercase; option.last font-style: italic;
.אחרון בכיתה מן האלמנט האחרון לשעבר אל הנוכחי.:ילד אחרון פסאודו הוא מאוד שימושי באמת. בדרך זו, אנחנו לא צריך להצביע על האלמנט האחרון ב HTML- קוד, אבל אנחנו עדיין יכולים לסגנון אותם עם CSS הבאים: li: last-child text-transform: uppercase; option: last-child font-style: italic;
סוגים עיקריים של פסבדו כיתות
1. פסאודו דינמי- Classes
: רחף, : המוקד, :קישור, ו youism מת, כל אשר ניתן להוסיף את תג עוגן. a: Visit color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. כיתות פסאודו מבוססות-מדינה
: מסומנת שניתן להחיל על תיבות הסימון ():מסך מלא למקד אלמנט כלשהו שמוצג כעת במצב מסך מלא: מושבת עבור רכיבי HTML שיכולים להיות במצב מושבת, כגון , , ו . : מסומנת, אשר דגל אם תיבת סימון מסומנת או לא. .תיבת סימון: מסומנת + תווית font-style: italic; קלט: מושבת צבע רקע: #EEEEEE;
3. כיתות פסאודו מבניות
:ילד ראשון, :ילד אחרון, ו : nth-child (n) - כל ניתן להשתמש כדי למקד אלמנט מסוים הילד בתוך מיכל מבוסס על המיקום שלה - ו :שורש אשר מכוונת אלמנט ההורה ברמה הגבוהה ביותר ב- DOM. 4. שונות פסבדו כיתות
: לא (x) אשר בוחר אלמנטים שאינם תואמים את בורר x: lang (קוד שפה) זה בוחר אלמנטים של איזה תוכן הוא בשפה מסוימת: dir (כיווניות) זה בוחר אלמנטים עם תוכן של כיווניות נתון (משמאל לימין או מימין לשמאל). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
nth-child לעומת מס 'סוג פסאודו-כיתות
: nth-child ו : nth של סוג כיתות פסאודו.: nth-of-child (n) מטרות אלמנט שהוא הילד השני של האלמנט ההורה שלו, ו : nth-of-type (n) מטרות השני בקרב אותו סוג של אלמנט (כגון פסקאות) בתוך אלמנט הורה. / * פסקה זה גם הילד השני בתוך אלמנט האב שלה * / p: nth-child (2) color: # 1E90FF; // lightblue / / * הקטע השני בתוך אלמנט הורה * / p: nth-of-type (2) font-weight: bold;
תיק 1
nth-child (2) הכלל לא יחול על זה. למרות שזה ילד שני, זה לא פסקה. (2) הכלל יחול, כמו כלל זה רק מחפש אלמנטים, ולא אכפת לי אחרים סוגים של רכיבים (כגון רשימות לא מסודרות) בתוך אלמנט ההורה.(2) הכלל יהיה בסגנון הסעיף השני שהוא ילד 3.
רשימה לא מסודרת 1, ילד 2
מקרה 2
: nth-child (2) וה : nth-of-type (2) יחולו הכללים, כמו הפסקה השנייה היא גם הילד השני של ההורה שלה
רשימה לא מסודרת 1, ילד 3
: nth-of-child ו : nth של סוג pseudo- שיעורים, CSS טריקים יש פוסט נהדר על זה. אם אתה משתמש ב- SASS, ה- Family.scs יכול לעזור לך ליצור מסובך nth-childאלמנטים נלווים.פסבדו-כיתות לעומת פסאודו-אלמנטים
אלמנטים פסאודו, כמו ::לפני ו ::לאחר (ראה מדריך זה על אופן השימוש בהם) הם גם שנוספו על ידי סוכני משתמשים, ו הם יכולים להיות ממוקד ומעוצב עם CSS כמו כן, בדיוק כמו כיתות פסאודו. ::לפני ו ::לאחר) או רק חלקים מסוימים של רכיבים קיימים (למשל ::מכתב ראשון או :: מציין מיקום). ::, בעוד שכיתות פסאודו מזוהות עם נקודתיים בודדות You.1. המקום שלהם רצף CSS CSS
ul>: last-child.red color: # B0171F;
ul> .red: הילד האחרון color: # B0171F;
.אדום) והשני בוחר את הילד האחרון בין האלמנטים שיש להם .אדום בכיתה ul> .red :: אחרי display: block; תוכן: 'אדום'; צבע: # B0171F;
פריטים עם הכיתה .אדום. ul> :: after.red display: block; תוכן: 'אדום'; צבע: # B0171F;
2. מספר המופעים ברצף סלקציה
:ילד ראשון ו :לקריאה בלבד באופן הבא: : ילד ראשון: לקריאה בלבד color: #EEEEEE;
הרחבות בוררי jQuery
You תחביר לא תמיד מהווה פסאודו ברמה של CSS. אם יש לך אי פעם השתמשו jQuery, אז אתה יכול להשתמש רבים של בוררים עם You תחביר, לדוגמה $ (': checkbox'), $ (': קלט') ו $ (': נבחר'). / * לשנות את הגופן של כל האלמנטים HTML הקשורים קלט, כמו כפתור, בחר, קלט * / $ (": קלט") .css ("משפחת גופן", "שליח חדש")
