اگر در CSS از راه‌های مختلف چند استایل برای یک المان تعریف کنیم، کدامیک اعمال می‌شود؟

اگر در CSS از راه‌های مختلف چند استایل برای یک المان تعریف کنیم، استایلی که بیشترین اولویت (specificity) و آخرین ترتیب را دارد، اعمال می‌شود.

برچسب ها:

من در دوره آموزش CSS یک جلسه اختصاصی برای این موضوع قرار دادم که میتونید این مطلب را از لینک زیر مطالعه کنید

اولویت استایل ها و قوانین specificity در CSS

ولی اگر بخواهم باز هم بصورت خلاصه توضیح بدهم باید بگویم:
وقتی چندین استایل برای یک المان تعریف می‌شود، CSS از چندین قانون برای تعیین اینکه کدام استایل باید اعمال شود، استفاده می‌کند:

اولویت انتخابگر (Selector Specificity): CSS بر اساس نوع انتخابگرها اولویت‌بندی می‌شود. انتخابگرهای ID بیشترین اولویت را دارند، پس از آن کلاس‌ها، شبه‌کلاس‌ها و انتخابگرهای ویژگی، و در نهایت انتخابگرهای نوع و شبه‌عناصر. هرچه انتخابگر خاص‌تر باشد، اولویت بیشتری دارد.
- انتخابگر نوع (Type Selector): p
- انتخابگر کلاس (Class Selector): .class
- انتخابگر ID (ID Selector): #id
- استایل‌های درون خطی (Inline Styles): style="..." (بیشترین اولویت را دارند)
ترتیب نوشتن (Source Order): اگر دو استایل دارای اولویت برابر باشند، آخرین استایلی که در کد نوشته شده است، اعمال می‌شود. CSS از بالا به پایین خوانده می‌شود و در صورت تساوی، استایل آخرین نوشته شده، موثر است.
استفاده از !important: این اعلان اولویت بسیار بالاتری نسبت به سایر قوانین دارد و می‌تواند هر قانون دیگری را نادیده بگیرد. اگر چندین قانون !important برای یک خاصیت وجود داشته باشد، قوانین اولویت انتخابگر و ترتیب نوشتن دوباره اعمال می‌شوند.

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            color: red; /* نوع انتخابگر (پایین‌ترین اولویت) */
        }
        .class {
            color: blue; /* انتخابگر کلاس (اولویت متوسط) */
        }
        #id {
            color: green; /* انتخابگر ID (بالاترین اولویت) */
        }
        p {
            color: yellow !important; /* استفاده از !important (اولویت بسیار بالا) */
        }
    </style>
    <title>CSS Specificity</title>
</head>
<body>
    <p id="id" class="class">This is a paragraph.</p>
</body>
</html>

در این مثال، رنگ متن پاراگراف به زرد تغییر می‌کند زیرا استفاده از !important بر تمامی قوانین دیگر اولویت دارد.