حساب الخصوصية: Inline وID وClass وElement
احسب درجات الخصوصية وتوقّع القاعدة الفائزة في أي تعارض للأنماط
حساب الخصوصية: Inline وID وClass وElement درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما الخصوصية؟
تحدد الخصوصية قاعدة CSS التي تفوز عندما تستهدف عدة قواعد العنصر والخاصية نفسيهما. وتُحسب على شكل درجة من أربعة أجزاء: (A, B, C, D)، حيث تمثل A أعلى جزء وتمثل D أدناه.
مكوّنات الخصوصية
الأعمدة الأربعة:
- A: الأنماط المضمّنة (السمة style="") = 1,0,0,0
- B: محددات المعرّفات (#id) = 0,1,0,0
- C: محددات الأصناف (.class) ومحددات السمات والأصناف الزائفة = 0,0,1,0
- D: محددات النوع (العنصر) والعناصر الزائفة = 0,0,0,1
أمثلة على الخصوصية
حساب الخصوصية:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>المحدد الشامل بلا خصوصية
يسهم المحدد الشامل * وعوامل الدمج (+ و> و~ والمسافة) والصنف الزائف :where() بقيمة صفر (0,0,0,0) في الخصوصية.
الأنماط المضمّنة تفوز
تتمتع الأنماط المضمّنة (السمة style="") بأعلى خصوصية (1,0,0,0). ولا يمكن تجاوزها من قاعدة في ورقة الأنماط إلا باستخدام !important.
مقارنة درجات الخصوصية
قارن من اليسار إلى اليمين. يحدد أول عمود تختلف فيه الدرجات الفائز. تتفوق (0,1,0,0) على (0,0,99,99) لأن عمود المعرّف يحسم المقارنة مباشرةً.
خصوصية :is() و:not() و:has()
تأخذ :is() و:not() و:has() خصوصية الوسيط الأكثر تحديدًا من بين وسائطها:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>خصوصية nth-child
تضيف :nth-child() و:first-child و:hover وغيرها من الأصناف الزائفة القيمة (0,0,1,0)، أي خصوصية على مستوى الأصناف.
خصوصية العناصر الزائفة
تضيف ::before و::after و::first-line وغيرها القيمة (0,0,0,1)، أي خصوصية على مستوى العناصر. وتوجد هذه العناصر في العمود D.
الخصوصية ليست توريثًا
تُحسب الخصوصية لكل خاصية ولكل عنصر على حدة. تفوز القاعدة ذات الخصوصية الأعلى لخاصية معينة، لكن القيم الموروثة من عنصر سلف ذي خصوصية عالية لا تتغلب على القواعد المباشرة الأكثر تحديدًا المطبقة على العنصر الابن.
أدوات حساب الخصوصية
استخدم أدوات عبر الإنترنت مثل specificity.keegan.st أو DevTools في المتصفح للتحقق من الخصوصية. في DevTools، تشير الأنماط المشطوبة في لوحة Styles إلى فوز قاعدة أكثر تحديدًا.
اختبار سريع
أي محدد يتمتع بخصوصية أعلى: #sidebar .link أم .nav .nav-item .nav-link.active؟
مراجعة
درجات الخصوصية هي (A, B, C, D): الأنماط المضمّنة، ثم المعرّفات، ثم الأصناف والسمات والأصناف الزائفة، ثم العناصر والعناصر الزائفة. قارن من اليسار إلى اليمين؛ فالعمود الأول المختلف هو الذي يحسم الفوز. يسهم :where() دائمًا بقيمة صفر. ويتفوق معرّف واحد على أي عدد من محددات الأصناف. استخدم لوحة Styles في DevTools لمعرفة القواعد الفائزة وسبب فوزها.
الأسئلة الشائعة
هل درس «حساب الخصوصية: Inline وID وClass وElement» مجاني؟
نعم — نص درس «حساب الخصوصية: Inline وID وClass وElement» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «حساب الخصوصية: Inline وID وClass وElement»؟
احسب درجات الخصوصية وتوقّع القاعدة الفائزة في أي تعارض للأنماط تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «حساب الخصوصية: Inline وID وClass وElement»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حساب الخصوصية: Inline وID وClass وElement
- التسلسل: المصدر والترتيب
- !important: متى ولماذا لا نستخدمها
- التوريث والخاصية all