محددات سمات CSS

تعرف على كيفية استخدام محددات سمات CSS

في هذا المنشور سأقدم محددات السمات.

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

محددات حضور السمة

نوع المحدد الأول هو محدد حضور السمة.

يمكننا التحقق من وجود عنصرلديهاسمة باستخدام[]بناء الجملة.p[id]سيختار الكلpالعلامات في الصفحة التي تحتوي على امتدادidالسمة ، بغض النظر عن قيمتها:

p[id] {
  /* ... */
}

محددات قيمة السمة بالضبط

داخل الأقواس يمكنك التحقق من قيمة السمة باستخدام=، ولن يتم تطبيق CSS إلا إذا كانت السمة تتطابق مع القيمة المحددة بالضبط:

p[id="my-id"] {
  /* ... */
}

تطابق جزء قيمة السمة

بينما=دعونا نتحقق من القيمة الدقيقة ، لدينا عوامل تشغيل أخرى:

  • *=يتحقق مما إذا كانت السمة تحتوي على الجزء
  • ^=يتحقق مما إذا كانت السمة تبدأ بالجزء
  • $=يتحقق مما إذا كانت السمة تنتهي بالجزء
  • |=يتحقق مما إذا كانت السمة تبدأ بالجزء وتتبعها بشرطة (شائعة في الفئات ، على سبيل المثال) ، أو تحتوي فقط على الجزء
  • ~=يتحقق مما إذا كان الجزء مضمنًا في السمة ، ولكن مفصولة بمسافات عن الباقي

جميع الشيكات التي ذكرناها هيحساسية الموضوع.

إذا قمت بإضافة ملفiقبل قوس الإغلاق مباشرة ، سيكون الشيك غير حساس لحالة الأحرف. إنه مدعوم في العديد من المتصفحات ولكن ليس في الكل ، تحققhttps://caniuse.com/#feat=css-case-insensitive.

تحميل مجانيكتيب CSS


المزيد من دروس css: