معرفة ما هو محدد سلفر CSS

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

محددات السلالة CSS

ينطبق محدد سليل CSS على العناصر الموجودة داخل عنصر آخر (أو أكثر دقة ، عنصرًا ينتمي إلى عنصر آخر). على سبيل المثال ، تحتوي القائمة غير المرتبة على علامة تحتوي على علامات كأحفاد. لنستخدم HTML التالي كمثال:

• هذا هو الرابط

ال LI العلامات هي من نسل UL العلامة. ال ا العلامة هي سليل على حد سواء ال LI (الطفل سليل) و UL الحفيد (سلالة الحفيد). إذا فكرت في التفكير في ذلك باستخدام مثال شجرة العائلة ، فإن

سيكون الوالد ، و
• سيكون الطفل ذلك العنصر ، وسيكون الطفل من
• وحفيد ال
  .

  إذاً كيف ستستهدف عناصر محددة في صفحة الويب باستخدام هذه الأدوات الفرعية التابعة؟ أولاً ، يجب عليك تحديد محددات descendant باستخدام محددات نوع (أو أكثر) مفصولة بمسافات.

  li a {text-decoration: none؛ }

  في هذا المثال ، تنطبق الأنماط فقط على عنصر الوصلة () الذي هو سليل عنصر عنصر قائمة (

  • ). لن تحصل جميع الروابط الأخرى على الصفحة التي ليست من سلالة عنصر قائمة على هذا النمط.

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

    إذا كنت ترغب في تحديد كل المراسي التي تنحدر من عناصر ul ، فستكتب:

    ul a {text-decoration: none؛ }

    الآن ، سيتم تطبيق هذه الأنماط على أي ارتباط يمثل سلالة عنصر قائمة. يمكنك أيضًا كتابة هذا المحدد

    ul li a {text-decoration: none؛ }

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

    استخدام محددات الصف ومحددات الهوية

    لا يجب أن تكون المحددات التي تنزل منها دائمًا من نوع أحفاد. على سبيل المثال ، تخيل أن لديك مساحة في الموقع (مثل قسم) تحتوي على خاصية المعرف من "لوحة الإعلانات". يمكنك إعداد محدد سليل خارج ذلك المعرف:

    #billboard ul {background-color: #ccc؛ }

    هذا من شأنه أن نمط القائمة غير مرتبة هو سليل عنصر مع معرف من "لوحة". يمكنك القيام بنفس الشيء بالنسبة لقيم الصف.

    div.billboard ul {background-color: #ccc؛ }

    هذا يفترض أن التقسيم يحتوي على قيمة فئة من "لوحة". فإن CSS أعلاه من شأنه أن نمط

    عنصر داخل أي قسم يحتوي على هذه القيمة فئة.

    يمكنك الحصول على حقا مفرط الثقيلة و verbose مع محددات السليل. على سبيل المثال ، إذا كنت تستخدم Dreamweaver لكتابة كود HTML الخاص بك ، فهناك إعداد عند إضافة قواعد CSS جديدة ستقوم تلقائيًا بإنشاء محدد بناءً على موضع المؤشر على تلك الصفحة. ما يفعله Dreamweaver في هذه الحالات هو إنشاء محدد سليل مطول وقوي جدًا. هذا النوع من الخصوصية ليس ضروريًا حتى تعمل CSS. ما تريد القيام به هو إيجاد توازن بين محدد سليل محدد بما يكفي بحيث يمكنك الانتقال إلى العناصر الدقيقة التي تحتاج إليها (بدون تلك التي لا ترغب في التأثير عليها) دون وجود قواعد CSS التي تحتوي على محددات مفرطة كبير.