زبان پیشرفته CSS

گروه‌بندی انتخابگرها

می‌توانید انتخابگرها را گروه‌بندی کنید، به این ترتیب، انتخابگرهای گروه‌بندی شده می‌توانند توصیف‌های مشترکی را به اشتراک بگذارند. انتخابگرهای مورد نیاز را با کاما از هم جدا کنید. در مثال زیر، ما تمام عناصر عنوان را گروه‌بندی کرده‌ایم. تمام عناصر عنوان سبز هستند.

h1،h2،h3،h4،h5،h6 {
  رنگ: سبز;
  }

ارث‌بندی و مشکلات آن

بر اساس CSS، عناصر فرزند ویژگی‌ها را از عنصر والد ارث می‌برند. اما همیشه به این صورت عمل نمی‌کند. به این قانون نگاه کنید:

body {
     font-family: Verdana, sans-serif;
     }

بر اساس این قانون، عنصر body وب‌سایت از فونت Verdana استفاده خواهد کرد (اگر این فونت در سیستم بازدیدکننده وجود داشته باشد).

با استفاده از ارث‌بندی CSS، عناصر فرزند از ویژگی‌های عنصر بالاتر (در این مثال body) ارث می‌برند (این عناصر شامل p، td، ul، ol، ul، li، dl، dt و dd هستند). نیازی به قوانین اضافی نیست، تمام عناصر فرزند body باید فونت Verdana را نمایش دهند، و این برای عناصر فرزند فرزند نیز صادق است. و در بیشتر مرورگرهای مدرن نیز اینگونه است.

اما در دوران خونین جنگ مرورگرها، این ممکن نبود، در آن زمان پشتیبانی از استانداردها اولویت اول شرکت‌ها نبود. به عنوان مثال، Netscape 4 از ارث‌بندی پشتیبانی نمی‌کند، نه تنها ارث‌بندی را نادیده می‌گیرد، بلکه قوانینی که برای عنصر body اعمال می‌شود را نیز نادیده می‌گیرد. IE/Windows تا IE6 نیز مشکلات مشابهی داشتند، جایی که استایل‌های فونت در جدول نادیده گرفته می‌شدند. ما چه باید بکنیم؟

با مهربانی به Netscape 4 بنگرید

خوشبختانه، شما می‌توانید با استفاده از قانون اضافی که ما "Be Kind to Netscape 4" می‌نامیم، مشکلاتی که مرورگرهای قدیمی نمی‌توانند از ارث‌بندی استفاده کنند را حل کنید.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

نسخه 4.0 مرورگرها نمی‌توانند ارث‌بخشی را درک کنند، اما می‌توانند انتخاب‌گرهای گروهی را درک کنند. این کار ممکن است بعضی از باندWITH کاربران را هدر دهد، اما اگر نیاز به پشتیبانی از کاربران Netscape 4 دارید، باید این کار را انجام دهید.

آیا ارث‌بخشی یک لعنت است؟

اگر نمی‌خواهید که شриф "Verdana, sans-serif" توسط تمام فرزندان ارث‌بخش شود، چگونه باید عمل کنید؟ مثلاً شما می‌خواهید که شриф پاراگراف‌ها Times باشد. هیچ مشکلی نیست. یک قاعده ویژه برای p ایجاد کنید تا از قوانین پدر خود خلاص شود:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }