حجم شعار الفئة على فئات محددة - يُطبق فقط عند الوصول المباشر

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

Contests - Forum | Cannabisanbauen.net (نحن نعمل على 3.2 مستقر)

CSS (في المشترك):

/* فئة المسابقات - صورة الفئة لكل فئة فرعية للمسابقة */
body[class^="category-contests"] {
@supports (--custom: property) {
.category-logo.aspect-image {
    --max-height: 250px;
}
.category-boxes .category-box .category-logo.aspect-image img, .category-boxes-with-topics .category-box .category-logo.aspect-image img {
    --height: 250px;
}
}
}

ولكن عند القدوم من صفحة أخرى في المنتدى، لا يتم “تشغيل” CSS ولا تزال شعارات الفئات بالحجم الافتراضي.

للتكرار:

  1. اذهب إلى https://forum.cannabisanbauen.net/
  2. اذهب إلى فئة “المسابقات” عبر الشريط الجانبي أو منتقي الفئات
  3. شعارات الفئات بالحجم الافتراضي

هل هذا خطأ أم يجب علينا تنفيذ CSS بشكل مختلف؟

هذا أمر غير معتاد!

لاحظت أنه اعتمادًا على كيفية الوصول إلى الصفحة، فإن الفئات المعينة لـ <body> بترتيب مختلف:


الرمز “^” في “body[class^=\"category-contests\"]” يجعله يبحث عن تطابق فقط في بداية قائمة الفئات، لذا تخميني هو أنه كان يعمل فقط عندما تكون “category-contest” هي الفئة الأولى في القائمة.

هناك رمز آخر “*” يبحث عن تطابق في أي مكان في قائمة الفئات. يمكنك محاولة تغيير الجزء الأول إلى هذا:

body[class*="category-contests"]
          ↑ ( * بدلاً من ^)

أو طريقة أبسط لكتابة هذا ستكون:

body.category-contests

أخبرني إذا كان ذلك يساعد!

إعجابَين (2)

شكرًا، لقد حلّت المشكلة بالفعل… لا أعرف لماذا عقدت الأمور كثيرًا :smiley: