آیا تا بحال برای شما اتفاق افتاده است که به یک کلاس استایل داده باشید ولی آن المان استایل شما را نگرفته باشد و وقتی علت آنرا بررسی میکنید متوجه میشود که استایل شما توسط استایل هایid آن المان override شده است؟ علت این موضوع بخاطر این است که id نسبت به کلاس از اولویت بیشتری برخوردار است و یا به عبارت دیگر "وزن" بیشتری دارد. اما وزن یک المان چجوری محاسبه میشود؟
اولویت یک المان براساس ترکیب سلکتورها مقایسه میشود، بدین صورت که:
- اتریبیوت استایل = a
- تعداد اتریبیوت id در یک سلکتور = b
- تعداد اتریبیوت های دیگر و pseudo-class در سلکتور = c
- تعداد نام المان ها و pseudo-element در یک سلکتور
برای مثال سند HTML ما بصورت زیر است:
<body> <article> <p>This is <span id="red">paragraph</span>.</p> </article> </body>
و در فایل style.css چنین استایلی داریم:
article p span { color: blue; } #red { color: red; }
براساس فرمول بالا "article p span" میشود "a=0, b=0, c=0, d=3 (0003)".
#red میشود "a=0, b=1, c=0, d=0 (0100)".
بنابراین کلمه paragraph قرمز میشود زیرا "#red(0100)" از "article p span(0003)" بزرگتر است.
مثال
#wrapper header div nav #gnavi{ list-style-type: none; } #top #hright #gnavi{ list-style-type: square; }
در مثال بالا لیست بصورت "squar" نمایش داده میشود زیرا #top #hright #gnavi(a=0, b=3, c=0, d=0) از #wrapper header div nav #gnavi(a=0, b=2, c=0, d=3) بزرگتر است و یا به عبارت دیگر "وزن" بیشتری دارد.
محمد صالح کاتبی یازدهم فوریه 2018