با استفاده از CSS Counters، یک فهرست چندسطحی بسازید که هر آیتم بهصورت شمارهگذاریشدهی سلسلهمراتبی مانند 1، 1.1، 1.1.1 نمایش داده شود.
19.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 04:33 0.0
برای حل این مسئله از ویژگیهای counter-reset و counter-increment همراه با شبهعنصر ::before استفاده کنید: روی کانتینر اصلی شمارنده را ریست کنید، برای هر li شمارنده سطح مربوطه را افزایش دهید و برای لیهای فرزند شمارنده جدیدی ریست کنید؛ سپس با content: counters(name, ".") مقدار شمارهی سلسلهمراتبی را نمایش دهید. نکات: list-style: none کنید تا بولت پیشفرض مخفی شود، فاصلهگذاری و نمایش (::before) را تنظیم کرده و برای سطوح بیشتر شمارندههای مجزایی تعریف کنید.
توسط پژوهشگر در 198 روز قبل ساعت 04:33 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکته: شمارندهها را روی کانتینر اصلی با counter-reset راهاندازی کنید، برای هر li از counter-increment استفاده و برای لیهای فرزند شمارندهی جدید را ریست کنید تا content: counters(name, ".") شمارهی سلسلهمراتبی درست تولید کند. حتما list-style: none بگذارید و با ::before و display/margin یا padding اعداد را تراز کنید تا فاصلهگذاری درست باشد. توجه داشته باشید که محتوای تولیدشده توسط CSS ممکن است توسط برخی صفحهخوانها خوانده نشود؛ برای دسترسی بهتر یا جایی که شمارهها معنایی دارند، یا آنها را در DOM قرار دهید یا متن قابلخواندن برای صفحهخوانها (مثل یک عنصر visually-hidden) اضافه کنید.
گزارش