pirooz

یک مشکل در شمارنده‌های nth-child

5 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

با سلام و احترام

یک مشکل در شمارنده‌های سلکتور nth-child در CSS دارم لطفاً کمک کنید.

همانطور که در لینک زیر ملاحظه می‌کنید:

http://www.w3schools...h-child_formula

برای تگ p سلکتور nth-child را استفاده کرده و 3n را به عنوان شمارنده قرار داده. انتظار می‌ره در تگ‌های p ، سومین تگ، بک‌گراند قرمز بگیره.

اما به خاطر وجود تگ H1 قبل از تگ‌های p بک‌گراند قرمز از دومین تگ p شروع شده و سپس سومین تگ‌های p قرمز می‌شه.

اگر تگ h1 را که ماقبل همه p ها هست برداریم، طبق انتظار، سومین تگ‌های p بک‌گراند قرمز می‌گیرند. اما با وجود تک h1 این معادله به هم می‌خوره.

اگر ممکنه دوستان یه توضیحی راجع به این مطلب بدهند.

برای حل این مشکل باید چه کار کرد؟

ویرایش شده در توسط pirooz
0

به اشتراک گذاری این پست


لینک به پست

سلام

به شکل زیر استفاده کنید


p:nth-of-type(3n) { color: red; }

4

به اشتراک گذاری این پست


لینک به پست

بجای 3n+0 می تونید از 3n+1 استفاده کنید و اگه فرضا قبل از p دو تگ دیگه مثلا h1 و h2 قرار داشت 3n+2 الی آخر

2

به اشتراک گذاری این پست


لینک به پست

متشکرم.

اما آیا این یک باگ در css هست یا فرمول خاصی داره؟

چون اصلا منطقی به نظر نمی رسه.

0

به اشتراک گذاری این پست


لینک به پست

نه باگ نیست n از صفر شروع می شه و مابقیش هم منطقیه دیگه خودتون بجای n از صفر شروع کنید و عدد بگذارید

(نکته nth-child تمامی تگهای اولین فرزند یک والد است و با نام سلکتور تفکیک نمیشه یعنی


div p:nth-child(3) {
color:red;
}

مفهومش این نیست که سومین تگ p داخل تگ div

مفهومش اینه که اگر سومین تگ داخل div تگ p بود رنگش قرمز بشه

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری