نظرة على CSS3 Negation (NOT) محدد

هذه المقالة هي جزء من موقعنا "سلسلة دروس HTML5 / CSS3" - مكرسة لمساعدتك في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

يحتوي CSS على بعض المحددات التي تتيح لك تحديد العناصر في ظروف معينة مثل :يحوم, :التركيز, :نشيط, وما إلى ذلك اليوم لن نغطي هؤلاء المختارين. سننظر في طريقة لا تزال غير معروفة ولكن يستخدمها معظم مصممي الويب - وهي :ليس محدد أو المعروف أيضا باسم محدد النفي.

ماذا تعمل، أو ماذا تفعل?

أنا متأكد من أن :ليس الاسم نفسه قد وصف بالفعل وظيفتها ، وأنه سوف يختار ببساطة عكس العنصر أو الشرط المحدد. فمثلا:

سيحدد بناء الجملة هذا أي عنصر آخر غير ص (الفقرة).

 : لا (ع)

في حين أن بناء جملة المثال أدناه سيختار شعبة العنصر الذي يفعل ليس عندي درس اي بي سي

 شعبة: لا (.abc)

حسنًا ، الآن ، دعونا نجرب هذا المحدد في مثال حقيقي:

بادئ ذي بدء ، دعونا نجعل بضع فقرات مع بعض الروابط من ويكيبيديا وعدد قليل من الروابط مع المجالات الخيالية. فيما يلي ترميز HTML للفقرة.

المغلق: لا محدد التجريبي
Jujubes تطبيق السمسم يستقر chups chupa كعكة الشوكولاتة. كعكة الشوفان الخطمي wypas الحلوى دونات كعكة. تشوبا تشوبس هلام الدببة كب كيك gummi. الليمون قطرات كعكة رقاقة.
كعكة الشوكولاتة بالجبنة هلام الحلو لفة مسحوق soufflÃ ؟؟ Â ؟؟ Ã © كعكة الشوكولاتة. Wypas القطن حلوى الليمون قطرات الكعكة الحلوى دونات بونزي مارزيبان. حلوى معكرون حلوى عرق السوس جيلي- o. فطيرة الشوكولاتة حلوى رول رول مرشملوو dragÃ ؟؟ Â ؟؟ Ã © ه حلوى القطن حلوى الخطمي.
مهلبية تتصدر الخطمي الدب مخلب. فطيرة فطيرة المعجنات غميس كعكه الفواكه جيلي الزنجبيل السمسم يستقر. الحلوى الحلوى مخلب الدب كب كيك. كعكة الجزر الكعك حلوى القطن tootsie لفة الكعك. جيلي الفاصوليا لاذع؟ Â؟ Â © ه حلوى الجليد رقاقة تتصدر شريط الشوكولاته. لفة حلوة حلوى التوفي السكر البرقوق dragÃ ؟؟ Â ؟؟ Ã © ه بونبون الحلوى الكعك.
كيك مرزباني wypas fruitcake. كعكة الشوفان بالشوكولاتة wypas dragÃ ؟؟ Â ؟؟ Â © e السكر كعكة الجزر البرقوق الجليد. كاراميلز بار شوكولاتة كرواسان بسكويت الويفر كيك دائري حلوى قصب البسكويت dragÃ ؟؟ ؟؟ Â © e.Candy الكعكة الشوفان كعكة السمسم يستقر فطيرة الجبن مسحوق tootsie لفة البسكويت الدب مخلب الدب. SoufflÃ ؟؟ Â ؟؟ Ã © © gummi bears jelly beans sameame snaps faworki الكعكة حلوى بونبون الحلو.

الخطة هنا هي: سنختار فقط الروابط التي لا تشير إلى ويكيبيديا ثم نعطي تلك العلامات علامة تعجب لتنبيه الانتباه إلى تلك الروابط.

أولا ، سوف نضيف :بعد عنصر زائف على جميع الروابط لوضع العلامة ، ونعرّفها كـ مضمنة كتلة جزء.

 a: after display: inline-block؛

بعد ذلك ، لتحديد كل رابط لا يشير إلى ويكيبيديا ، سوف نجمع بين :ليس محدد مع محدد السمة. سيختار محدد السمة هنا كل علامة ربط تبدأ بها السمة href http://en.wikipedia.org/ وعن طريق الجمع بينه وبين :ليس, ومن الواضح أن تحديد العكس. حسنا هيا بنا:

 a: not ([href ^ = "http://en.wikipedia.org/"]): after background-colour: # F8EEBD؛ الحدود: 1px صلب # EEC56D ؛ نصف قطر الحدود: 3px 3px 3px 3px ؛ اللون: # B0811E ؛ يحتوى: "!"؛ حجم الخط: 10pt ؛ الهامش الأيسر: 5px ؛ الحشو: 1px 6px ؛ الموقف: نسبي

إنها تعمل! علامات المرساة التي لا تشير إلى ويكيبيديا لديها الآن علامة تعجب.

علة كروم

إذا شاهدت ذلك في Chrome ، فستلاحظ أن التأثير المقدم ليس كما ورد أعلاه. يبدو أن جميع الروابط تحتوي على علامة تعجب بغض النظر عن عنوان URL.

وقد تم بالفعل تناول هذه الحالة باعتبارها علة. لذلك ، لإصلاح هذا الخطأ ، نحتاج إلى إضافة هذه القاعدة.

 a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block؛

والآن يجب أن تم إصلاح المشكلة.

عرض

استنتاج

في بعض الحالات باستخدام :ليس المحدد هو الخيار الأكثر فاعلية ، تمامًا مثل المثال أعلاه ، حيث يمكننا تحديد بعض العناصر العشوائية دون حتى إضافة فئة غير ضرورية أو ترميز إضافي إلى المستند.

يمكنك بالفعل إنشاء تأثيرات رائعة من خلال استخدام هذا المحدد ، وهذا مثال واحد: تصفية الأداء الوظيفي باستخدام CSS3