ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/20209/download_problem_initial_project/65889/) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` nested-selector ├── index.html └── styles.css ``` <details class="brown"> <summary> راه‌اندازی پروژه </summary> - ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. - سپس فایل `index.html` را در مرورگر خود باز کنید. </details> # جزئیات در فایل `html` داده شده دو تگ `p` در داخل یک `div` با ایدی `container` و یک تگ `p` دیگر بیرون از آن قرار گرقته است. شما باید با استفاده از انتخاب‌کننده‌های مناسب استایلی بسازید که باعث شود تگ‌های داخل `container` دارای رنگ `indigo` و تگ خارج از آن دارای رنگ `indianred` باشد. # نکات - شما تنها مجاز به اعمال تغییرات در فایل `styles.css` هستید. - فقط فایلی را که مجاز به تغییر هستید باید آپلود نمایید. # قسمت آموزشی در این قسمت راهنمایی‌های سوال، به مرور اضافه می‌شود. مشکلات‌تان در راستای حل سوال را می‌توانید از بخش ["سوال بپرسید"](https://quera.ir/contest/clarification/20209/) مطرح کنید. <details class="blue"> <summary> راهنمایی ۱ </summary> مقدار یک ویژگی المان ممکن است چندین بار تغییر کند ولی هربار مقدار جدیدی بگیرد. برای مثال رنگ یک تگ `p` یکبار مشکی است و یکبار قرمز. درباره این موضوع یک سری قواعد وجود دارد که هرکدام اولویتی دارند و بسته به اولویت آن‌ها، استایل‌ها داده می‌شود. یکی از این موارد قرار گرفتن استایل جدید بعد از استایل ما می‌باشد. یکی دیگر از این موارد استفاده از `!important` در هنگام استایل‌دهی می‌باشد که صرف از نظر از تقدم استایل‌ها، آن استایل که دارای `!important` می‌باشد، انتخاب می‌شود. **درنهایت ترکیب اولویت‌ها و انتخاب‌کننده‌ها منجر به انتخاب استایل توسط مرورگر می‌شود.** </details> <details class="blue"> <summary> راهنمایی ۲ </summary> مهم‌ترین و پرکاربردترین قواعد انتخاب استایل توسط مرورگر این است که هرچه انتخاب‌کننده (*selector*) خاص‌تر باشد، آن انتخاب می‌شود. ``` a { color: yellow; } nav > a { color: green; } ``` در مثال بالا رنگ تگ‌های `a` سبز انتخاب می‌شود چرا که انتخاب‌کننده خاص‌تر است. **ترکیب این قاعده با قاعده قبلی منجر به انتخاب استایل توسط مرورگر می‌شود.** </details> <details class="blue"> <summary> راهنمایی۳ </summary> استایل‌های داخل *HTML* به استایل‌های داخل فایل‌های *CSS* مقدم هستند. این تقدم را می‌توان با استفاده از `important!` از بین برد. برای تغییر تقدم `important!` می‌توان سلکتور را مشخص‌تر کرد. در این حالت استایلی که سلکتور آن خاص‌تر باشد، انتخاب می‌شود. </details>