מבט לתוך CSS3 שלילית (לא) בורר
CSS יש כמה בוררים המאפשרים לך לבחור אלמנטים בתנאים מסוימים, כגון : רחף, : המוקד, : פעילים, וכו 'עם זאת היום אנחנו לא יכסה אלה בוררים. אנו נסתכל לתוך אחד שהוא עדיין שיטה ידועה אך בשימוש על ידי רוב מעצבי אתרים - כלומר : לא בחר או ידוע גם בורר השלילה.
מה זה עושה?
אני בטוח כי : לא השם עצמו כבר תיאר את הפונקציה שלו, כי זה פשוט לבחור ההפך של האלמנט או המצב שצוין. לדוגמה:
תחביר זה יבחר כל אלמנט אחר עמ ' (פסקה).
: לא (p) בעוד תחביר לדוגמה להלן יבחר את div אלמנט זה עושה לא יש בכיתה א ב ג
div: לא (.abc) בסדר, עכשיו, בואו ננסה את בורר זה בדוגמה אמיתית:
קודם כל, בואו נעשה כמה פסקאות עם כמה קישורים מוויקיפדיה וכמה קישורים עם תחומים בדיוניים. הנה סימון HTML עבור הפסקה.
CSS: לא הדגמה בורר
Jujubes להחיל שומשום מצליף chups chupa עוגת שוקולד. עוגה שיבולת שועל wispas טופי דונאט עוגה. Chupa chops ג 'ל cupcake gummi דובים. לימון טיפות עוגת רקיק.
עוגת גבינה ג'לי מתוק רול אבקה soufflà ?? à ?? © שוקולד עוגה. וויפאס צמר גפן מתוק לימון טיפות עוגיות סוכריות סופגניות בונבו מרציפן. מקרוני סוכריות ליקריץ ג'לי. פאי שוקולד ממתקים רול מתוק מרשמלו à ¢ â, ¬ â ?? ?? © e צמר גפן מתוק בראוני מרשמלו.
פודינג ציפוי מרשמלו לשאת טופר. עוגה מאפינס gummies מאפה עוגת פירות ג 'לינג' ר. קנדי פודינג עוגה טופר. עוגת גזר מאפין כותנה סוכריות tootsie רול מאפין. ג 'לי שעועית טארט draga ?? à ?? © e מתוק הדובדבן פרוסות שוקולד שוקולד. רול מתוק טופי סוכר שזיפים אפונה dragà ?? à ?? © e ממתקים.
עוגת מרציפן עוגת פירות. עוגת שיבולת שועל שוקולד wypas dragà ??  ?? à © © e שזיפים סוכר גזר שזיפים עוגה. קרמלון שוקולד בר קרואסנט עוגות עוגות פאי ג'וג'ובס בר שוקולד. ביסקוויט סוכריות קניאה Dragà ?? à ?? © e.Candy בראוני עוגיות שיבולת שועל שומשום אבקת גבינה tootsie רול ביסקוויט לשאת טופר. Soufflà ??  ?? Ã' © gummi דובים ג 'לי שעועית שומשום מצליפה faworki עוגיות קינוח מתוק.
התוכנית כאן היא: נבחר רק את הקישורים שאינם מצביעים על ויקיפדיה ולאחר מכן לתת קישורים אלה סימן קריאה כדי להזהיר את תשומת הלב כלפי קישורים אלה.
ראשית, נוסיף :לאחר pseudo-element על כל הקישורים למקם את הסימן, ואנו מגדירים אותו כ in-block אלמנט.
a: after display: inline-block;
לאחר מכן, כדי לבחור כל קישור שאינו מצביע על ויקיפדיה, נשלב את הקישור : לא בחר עם בורר תכונות. בורר התכונות כאן יבחר כל תג עוגן שבו מתחילה התכונה href http://en.wikipedia.org/ ועל ידי שילוב זה עם : לא, זה יהיה ללא ספק לבחור את ההפך. אז הנה אנחנו מתחילים:
a: not ([href = = "http://en.wikipedia.org/"]): אחרי background-color: # F8EEBD; הגבול: 1px מוצק # EEC56D; border-radius: 3px 3px 3px 3px; צבע: # B0811E; תוכן: "!"; font-size: 10pt; margin-left: 5px; ריפוד: 1px 6px; מקומות קרובים
זה עובד! תגי עוגן שאינם מצביעים על ויקיפדיה עכשיו יש סימן קריאה.
באג של Chrome
אם אתה מציג את זה ב- Chrome, תוכל להבחין כי אפקט שניתנו לא כמו לעיל. נראה שלכל הקישורים יש סימן קריאה ללא קשר לכתובת האתר.
במקרה זה יש כבר התייחס כמו באג. לכן, כדי לתקן את הבאג הזה, אנחנו צריכים להוסיף את הכלל הזה.
a [href = = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
ועכשיו הבעיה צריכה להיות קבועה.
- הדגמה
סיכום
בנסיבות מסוימות באמצעות : לא בחר הוא באמת האפשרות היעילה ביותר, בדיוק כמו הדוגמה לעיל, שבו אנו יכולים לבחור כמה אלמנטים אקראיים מבלי להוסיף אפילו בכיתה מיותרת, או סימון נוסף למסמך.
אתה יכול למעשה לבנות עוד אפקטים גדולים על ידי ניצול בורר זה, וזה דוגמה אחת: פונקציונליות מסנן עם CSS3
