كيف تعمل خصوصية CSS في المتصفح

يجد كثير من الناس CSS معقدة. لقد توصلوا إلى العديد من الأعذار: إن الافتقار إلى القدرة على فهم CSS أو CSS أمر سيئ في حد ذاته. ولكن الحقيقة هي أن الناس ببساطة لم يجدوا الوقت لدراسته حقًا. إذا كنت تقرأ هذا المقال ، فأنت مهتم بتعلم CSS وهو رائع!

ما هي خصوصية CSS؟

هل سبق لك أن كتبت نمطًا ، لكنها لا تعمل ، ثم قمت بإضافة ! مهم (أم لا) ، ومع ذلك لا يعمل؟ ثم تنظر إلى Devtools وتدرك أن أسلوبًا آخر يتداخل مع أسلوبك في مكان ما؟

هذه هي خصوصية CSS! هذه هي الطريقة التي يحدد بها المتصفح أيًا من المحددات المتنافسة لتطبيقه على العنصر. عندما يرى المستعرض أن اثنين أو أكثر من المحددات يتطابقان مع نفس العنصر ، وأن لدى المحددات قواعد متعارضة ، فإنه يحتاج إلى طريقة لمعرفة أي من القواعد تنطبق على هذا العنصر. تسمى طريقة حدوث ذلك "قيمة خصوصية CSS".

قبل الخوض في خصوصية CSS ، تذكر هذه الأشياء:

1. تعد خصوصية CSS مهمة فقط عندما تؤثر محددات متعددة على نفس العنصر. يحتاج المستعرض إلى طريقة لمعرفة النمط الذي سيتم تطبيقه على العنصر المقابل عند وجود قيم خاصية متعارضة.
2. عندما يكون لواحد أو أكثر من محددات المطابقة نفس قيمة الخصوصية (الوزن) ، فإن المتصفح يختار محدد المطابقة "الأحدث" الذي يظهر بالقرب من أسفل قائمة محددات المطابقة. تشرح الفقرة التالية ما هي "قائمة المختارين المناسبين".
3. ينشئ المستعرض "قائمة من المحددات المناسبة" من خلال الجمع بين جميع الأنماط الموجودة على صفحة الويب وتصفية تلك التي لا تتطابق مع عنصر "التصميم حاليًا" . توجد أول محددات في ورقة الأنماط في أعلى القائمة ، وآخر محددات في الأسفل.
4. تحتوي خاصية نمط عنصر ما على قيمة خصوصية أكبر من محددات أوراق الأنماط ، إلا إذا كان هناك ! هام في محدد ورقة الأنماط.
5. استخدام ! هام (والذي يعتبر ممارسة سيئة في بعض الحالات) يغير خصوصية المحدد. عندما يكون هناك محددان لهما نفس الخصوصية ، فإن المحدد مع ! المهم يفوز. وعندما يكون كلاهما مهمًا ، يفوز المحدد "الأحدث".

قيمة الخصوصية

الآن يمكننا الانتقال إلى كيفية تحديد المتصفح لخصوصية المحدد.

يمكن تمثيل خصوصية المحدد كسلسلة من ثلاثة أرقام مفصولة بواصق (أو أيا كان): "2–4". الرقم الأول هو عدد محددات المعرّفات الحالية ، والثاني هو عدد محددات الفئة ، محددات السمة والفئة الزائفة ، والثالث هو عدد محددات النوع والعناصر الزائفة المتاحة. على سبيل المثال:

#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0 

تعريف الأكثر "محددة"

لتحديد المحدد الأكثر تحديدًا ، يمكنك مقارنة كل من القيم الثلاثة.

دعنا نقول أن لديك 1-1-1 و 0-3-0 ، كما في المثالين الأخيرين ، وتحتاج إلى تحديد أي واحد لديه أكثر خصوصية. أولاً ، تقارن القيمتين 1 و 0 ، وفي هذه الحالة ، يفوز 1 . هذا يعني أنه في الوقت الحالي ، div.yellow#red بقيمة خصوصية أكبر ... لكننا لم ننتهي من مقارنة القيم.

المقبل ، قارن بين القيم 1 و 3 ، 3 انتصارات. حاليًا .red.blue.yellow له قيمة خصوصية أكبر.

أخيرًا ، نقوم بمقارنة القيم الأولى ، 1 و 0 ، و 1 فوز ، لذلك div.yellow#red له خصوصية أكثر من .red.blue.yellow .

توفر خصوصية CSS الخاصة بالمحدد تفسيراً جيداً لسبب عدم تمكن عدد من محددات الفصل من تجاوز محدد الهوية.

تحذيرات صغيرة

3 "المزالق" التي يجب أن تكون على دراية بها:

1. كتبت أعلاه أن الرقم الثاني في سلسلة من الأرقام المكونة من ثلاثة هو "عدد محددات الفصول ، محددات السمات والفئات الزائفة". هذا صحيح في جميع الحالات إلا عندما يكون :not() فئة زائفة. عندما تكون :not() زائفة ، فإننا لا نعتبرها ، ولكن تجاهلها ببساطة. لكن لا يتم تجاهل محددات داخلها ، فهي تعتبر طبيعية.
2. تتفهم خصوصية CSS "شكل" المحدد. هذا يعني أنه عندما يكون لديك *[id="yellow"] و #yellow ، يتم التعامل مع الأول على أنه محدد سمة.
3. لا يتم تحديد المحدد العالمي * وحده تجاه خصوصية المحدد. في الفقرة [id="yellow"] أعلاه ، فإن جزءًا من المحدد هو ما يهم حقًا.

آمل أن يكون هذا المقال سهل الفهم ويساعد على فهم ما هي خصوصية CSS. الآن يمكنك إلقاء نظرة على الأسلوب وتحديد مدى "محددة" بسهولة.