html - type - second child css




CSS decation pseudo-class: not() لعناصر الوالد/السلف (2)

ألا يقرأ هذا ، "حدد جميع عناصر h1 التي لها سلف ليس عنصر div ...؟"

نعم هو كذلك. ولكن في مستند HTML نموذجي ، يحتوي كل h1 على h1 على الأقل ليسا عناصر div - وهذه الأسلاف ليست سوى body و html .

هذه هي المشكلة في محاولة تصفية الأسلاف باستخدام :not() : إنها لا تعمل بشكل موثوق به ، خاصة عندما :not() لا يتم تأويل :not() قبل محدد آخر مثل محدد النوع أو محدد الصف ، على سبيل المثال .foo:not(div) . سيكون لديك وقت أسهل بكثير ببساطة تطبيق الأنماط على جميع عناصر h1 وتجاوزها مع div h1 .

في Selectors 4 ، :not() تم تحسين :not() لقبول المحددات المعقدة الكاملة المحتوية على combinators ، بما في ذلك combiler desciler. ما إذا كان سيتم تنفيذ ذلك في ملف التعريف السريع (وبالتالي CSS) سيجري اختباره وتأكيده ، ولكن بمجرد تنفيذه ، ستكون قادرًا على استخدامه لاستبعاد العناصر مع أسلاف معينين. وبسبب الطريقة التي تعمل بها المحددات ، يجب القيام بالنفي على العنصر نفسه وليس السلف من أجل العمل بموثوقية ، وبالتالي سيبدو بناء الجملة مختلفًا قليلاً:

h1:not(div h1) { color: #900; }

أي شخص على دراية بـ jQuery سوف يشير بسرعة إلى أن هذا المحدد يعمل في jQuery اليوم . هذا هو واحد من عدد من أوجه التباين بين محددات 3 :not() و jQuery's :not() ، والتي يسعى Selectors 4 إلى تصحيحها.

هذا يقودني للمكسرات

HTML:

<div><h1>Hello World!</h1></div>

CSS:

*:not(div) h1 { color: #900; }

ألا يقرأ هذا ، "حدد جميع عناصر h1 التي لها سلف ليس عنصر div ...؟" وهكذا ، "مرحبا العالم!" لا ينبغي أن يكون أحمر اللون ، ومع ذلك لا يزال.

بالنسبة إلى الترميز أعلاه ، فإن إضافة combinator الطفل يعمل:

*:not(div) > h1 { color: #900; }

ولكن لا يؤثر على عنصر h1 إذا لم يكن طفلاً لعنصر div . فمثلا:

<div><article><h1>Hello World!</h1></article></div>

وهذا هو سبب رغبتي في الإشارة إلى عنصر h1 باعتباره سليلًا ، وليس طفلًا ، لعنصر div . أي واحد؟


عنصر <html> ليس <div> . العنصر <body> ليس <div> .

لذلك فإن الشرط "له سلف ليس <div> " سيكون صحيحًا لجميع العناصر.

ما لم يكن بإمكانك استخدام محدد (الطفل) ، لا أعتقد أنه يمكنك القيام بما تحاول القيام به - إنه لا معنى له حقًا. في المثال الثاني ، <article> ليس div ، بحيث يتطابق *:not(div) أيضًا.





css-selectors