גיליון רמאות של CSS של בוחרי CSS ופרטים

Heet גיליון בגידות של בוחרי CSS

לאחרונה צללתי לבוחרי CSS.

יש כל כך הרבה בוחרי CSS עם סמלים לא מוכרים,>. , * + ~ [] וכו ', כך שלרוב התבלבלתי ביחס לאופן בו בוחרי CSS עובדים. בסופו של דבר יישרתי אותם בראשי ועיצבתי אותם מחדש איך אני מבין.

* למען האמת הייתי רוצה לארגן אותם בדף בגודל A4 אחד בכדי לחסוך ניירות ולהציל את כדור הארץ אבל לא יכולתי, כי יש כל כך הרבה בוחרים שרציתי להוסיף אז הייתי צריך לעבור על יותר מדף אחד . כל ארבעת דפי ה- A4, למעט דפי השער.

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

גיליון רמאות של בוחרי CSSמשחק בוחרי CSS מאת ראיין יו

עבור להוריד את גיליון העיתון של בוחרי CSS ותיהנה מהמשחק🕹

אין דאגות. הכל בחינם.

צלול לבורר CSS.

אני אפרט את האינפוגרפיקה יחד עם הגדרות MDN כדי להקל עליך.

סוג בורר

בורר סוג CSS תואם אלמנטים לפי שם הצומת. במילים אחרות, הוא בוחר את כל האלמנטים מהסוג הנתון בתוך מסמך. - MDN

סוג בורר

בורר תעודות זהות

בחירת רכיב על סמך הערך של תכונת ה- id שלו. צריך להיות רק אלמנט אחד עם מזהה נתון במסמך. - MDN

בורר תעודות זהות

בורר צאצאי

כל אלמנט התואם את B שהוא צאצא של אלמנט התואם ל- A (כלומר ילד, או ילד של ילד וכו '). הקומבינטור הוא חלל אחד או יותר או כפול גדול יותר מסימנים. - MDN

בורר צאצאי

שלב את בוחרי הצאצאים והמזהים

שלב את בוחרי הצאצאים והמזהים

בורר כיתות

בורר הכיתות של CSS תואם לרכיבים המבוססים על תוכן תכונת הכיתה שלהם. - MDN

בורר כיתות

שלב את בורר הכיתות

שלב את בורר הכיתות

קומבינטור פסיקים

כל אלמנט התואם A ו / או B. - MDN

קומבינטור פסיקים

הבורר האוניברסלי

פשוט בחר הכל!

הבורר האוניברסלי

שלב את הבורר האוניברסלי

שלב את הבורר האוניברסלי

בורר אחים צמוד

קומבינור האחים הצמוד (+) מפריד בין שני בוחרים ומתאים לאלמנט השני רק אם הוא עוקב מיד אחר האלמנט הראשון, ושניהם ילדים מאותו אלמנט האב. - MDN

בורר אחים צמוד

בורר אחים כללי

קומבינטור האחים הכללי (~) מפריד בין שני בוחרים ומתאים לאלמנט השני רק אם הוא עוקב אחר האלמנט הראשון (אם כי לא בהכרח באופן מיידי), ושניהם ילדים מאותו אלמנט האב. - MDN

בורר אחים כללי

בורר ילדים

שילוב הילד (>) ממוקם בין שני בוחרי CSS. זה תואם רק את האלמנטים התואמים את הסלקטור השני שהם ילדי האלמנטים שתואמים את הראשון. - MDN

בורר ילדים

ילד ראשון פסאודו-בורר

המעמד הבדוי של CSS לילד הראשון מייצג את המרכיב הראשון בקרב קבוצת אלמנטים של אחים. - MDN

ילד ראשון פסאודו-בורר

רק בורר פסבדו לילדים

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

רק בורר פסבדו לילדים

פסאודו-סלקטור אחרון לילד

ה- pseudo-class של ילד אחרון מייצג את האלמנט האחרון בקבוצה של אלמנטים אחים. - MDN

פסאודו-סלקטור אחרון לילד

פסאודו-סלקטור לילד Nth

הכיתה הפסאודו CSS לילד (nth-child) תואמת מרכיבים על סמך מיקומם בקבוצת אחים. - MDN

בורר פסאודו לילדים ה- N

בורר הילד האחרון

הכיתוב הבדולתי ה- n-the-last () CSS תואם מרכיבים על סמך מיקומם בקבוצת אחים, סופרים מהסוף. - MDN

בורר הילד האחרון

ראשית בורר סוג

המעמד הבדוי מסוג CSS הראשון מסוגו מייצג את המרכיב הראשון מסוגו בקרב קבוצת אלמנטים של אחים. - MDN

ראשית בורר סוג

התשיעי של בורר הסוגים

ה- pseudo-class של ה- nth-of-type () מתאים לאלמנטים מסוג מסוים, בהתבסס על מיקומם בקבוצת אחים. - MDN

התשיעי של בורר הסוגים

בורר מסוג n עם סוג פורמולה

בורר מסוג n
 הערה:
: סוג מסוג (אפילו)
: סוג מסוג (מוזר)
: סוג n (2)
: nth סוג (2n)
: n-of-the-type (3n-1)
: nth סוג (2n + 2)

רק של בורר סוגים

ה- pseudo-class היחיד מסוג CSS מייצג אלמנט שאין לו אחים מאותו סוג. - MDN

רק של בורר סוגים

אחרון של בורר סוגים

ה- pseudo-class אחרון מסוג CSS מייצג את המרכיב האחרון מסוגו בקרב קבוצת אלמנטים של אחים. - MDN

אחרון של בורר סוגים

בורר ריק

ה- pseudo-class ריק CSS מייצג כל אלמנט שאין לו ילדים. ילדים יכולים להיות צמתים או טקסט (כולל שטח מרווח). הערות, הוראות עיבוד ותכני CSS אינן משפיעות על אם אלמנט נחשב ריק. - MDN

בורר ריק

פסאודו-שלילה שלילה

ה- pseudo-class של CSS מייצג אלמנטים שאינם תואמים לרשימת בוחרים. מכיוון שהוא מונע את בחירת הפריטים הספציפיים, זה ידוע ככיתת הפסאודו לשלילה. - MDN

פסאודו-שלילה שלילה

בורר תכונות

בוחרי תכונות הם סוג בורר מיוחד אשר יתאים לאלמנטים בהתבסס על תכונותיהם וערכי התכונות שלהם. התחביר הגנרי שלהם מורכב מסוגריים מרובעים ([]) המכילים שם מאפיין ואחריו תנאי אופציונלי להתאמה לערך התכונה. ניתן לחלק את בוחרי התכונות לשתי קטגוריות בהתאם לאופן שהם מתאימים לערכי התכונה: בוחרי תכונות נוכחות וערך ובוחרי תכונות של תחנת משנה. - MDN

בורר תכונות

בורר ערך תכונות

בורר ערך תכונות

תכונה מתחילה עם בורר

בורר זה יבחר את כל האלמנטים עם התכונה attr שעבורם הערך מתחיל ב- val. - MDN

תכונה מתחילה עם בורר

תכונה מסתיימת עם בורר

בורר זה יבחר את כל האלמנטים עם התכונה attr שעבורם מסתיים הערך val. - MDN

תכונה מסתיימת עם בורר

בורר תכונות Wildcard

בורר זה יבחר את כל האלמנטים עם התכונה attr שעבורם הערך מכיל את ה- valring subst. (מחרוזת היא פשוט חלק מחרוזת, למשל "חתול" הוא מחרוזת במחרוזת "זחל".) - MDN

בורר תכונות Wildcard

מזל טוב, השלמת

מאמרים

🕹 CodePen

Questions כל שאלה או משוב

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

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

Ign סימן קודים שמח היום