مبحث specificity در CSS

[amirabbas_p30magazine]

مبحث specificity یکی از مباحث مهم CSS هستش که کمی پیچیده هست.

شما می دونید که میشه عناصر مختلف داخل صفحه رو با استفاده از گزینشگر ها (selectors) ی مختلفی در داخل صفحه انتخاب کنید و سبک خاصی رو به اونها اختصاص بدید. گاها پیش میاد که شما دستورات CSS رو نوشته اید و بعضی از این دستورات با هم تداخل دارند و رنگ یا اندازه و فونت یک عنصر در صفحه دو بار به طور مجزا در دو بخش مختلف کد تعیین شده و مقادیر هم با هم تفاوت دارند. برای مثال :

h1 {color: red;}
body h1 {color: green;}

h2.grape {color: purple;}
h2 {color: silver;}

خوب در این شرایط مرورگر کدام سبک رو برای اعمال کردن به عنصر مربوطه انتخاب می کنه ؟
الان در مثال بالا یک بار رنگ متن داخل تگ h1 ، قرمز انتخاب شده و در دستور دیگری تمامی تگ هایی که داخل تگ body هستند با رنگ سبز مشخص شده. در اینجا مرورگر کدوم مقدار رو برتر می دونه و از اون استفاده می کنه ؟
خوب مشخصه که هر دو رنگ رو نمیشه با هم به کار برد و صد در صد یکی از دستورات بر اون یکی ارجحیت داره. خوب حالا این ارجحیت دستور ها چطور انتخاب می شوند.
در اینجا مبحث specificity هر تگ و یا گزینشگر مشخص کننده ارجحیت هر دستوره
خوب این ارجحیت چطور مشخص میشه و میزان اهمیت هر تگ و یا هر گزینشگر چقدره ؟

ارزش عناصر و گزینشگر ها به شکل یک عدد چهار رقمی حساب میشه که شبیه به اینه
0,0,0,0
خوب حالا اینجا لیست اهمیت گزینشگر ها و برچسب ها رو می نویسم

1- برای هر دستوری که به شکل درون خطی و داخل خود کد HTML نوشته میشه مقدار به این شکل هست

1,0,0,0

شما می تونید این رو 1000 بخونید. این بالاترین ارزشه و اگر شما مقدار مشخصی رو برای یک دستور به شکل درون خطی و در داخل کد HTML به شکل به کار بردن دستور ""=stlye به کار ببرید بر تمامی دستورات ارجحیت داره. مثلا شما در فایل CSS خودتون رنگ تگ <P> رو قرمز مشخص کردید ولی در داخل کد HTML رنگ تگ <P> رو به این شکل مشخص کرده اید :

<p style="color: green;">youe text here</p>

خوب الان رنگ تگ پاراگراف رو ما سبز مشخص کردیم و چون ارزش CSS درون خطی یا به عبارتی CSS inline از همه بیشتره در نتیجه متن داخل اون پاراگراف به رنگ سبز نمایش داده میشه.

2- دستوری که به یک id اختصاص داده شده باشه مقدار specificity اون به این شکله

0,1,0,0

شما میتونید این مقدار رو 100 بخونید. بعد از CSS درون دستوری این مقدار بالاترین ارزش رو داره و اگر شما مقداری رو برای یک id مشخص کنید اون مقدار بالاترین ارزش رو داره (البته کمتر از CSS درون خطی )

3- مقدار specificity برای class و گزینشگر های کلاس کاذب (pseudo class selectors) و گزینشگر های خصوصیت (atribute selectors) این مقدار شبیه به اینه :

0,0,1,0

شما می تونید این مقدار رو 10 بخونید. بعد از اون دو مورد بالا این مقدار بالاترین ارزش رو داره.

4- مقدار specificity برای برچسب (tag selectos) و عناصر کاذب (pseudo elements) این مقدار شبیه به اینه:

0.0.0.1

شما میتونید این مقدار رو 1 بخونید. این مقدار کمترین ارزش رو داره.

گزینشگر فراگیر (علامت *) و ترکیب کننده ها (علامت هایی مثل < که در کد CSS استفاده می شوند) ارزش صفر دارند و به حساب نمیان.

خوب حالا چطور باید این مقادیر specificity رو در داخل کد حساب کنیم؟
برای محاسبه مقادیر باید اونها رو با هم جمع بزنیم. به این مثال دقت کنید:

p em {color: purple;}  /* specificity = 0,0,0,2 */

در این مثال ما دو گزینشگر برچسب داریم و هر کدوم از اونها ارزش یک داره و در نتیجه ارزش این دستور در کل میشه 2

و یا این مثال:

div#sidebar *[href] {color: silver;}  /* specificity = 0,1,1,1 */

خوب ما در مثال بالا یک گزینشگر برچسب داریم (همون div) یه id داریم (همون #sidebar) و یک گزینشگر خصوصیت داریم [href] و یک گزینشگر فراگیر داریم (همون علامت *) که مقدارش صفره. خوب مقدار specificity این دستور میشه:

100 تا برای گزینشگر آیدی + 10 تا برای گزینشگر خصوصیت + 1 برای گزینشگر برچسب = 111

خوب حالا در عمل این کد ها رو با هم مقایسه می کنیم

h1 {color: red;}  /* 0,0,0,1 */
body h1 {color: green;}  /* 0,0,0,2  (winner)*/

در این مثال مقدار specificity دستور دوم بیشتره در نتیجه دستور دوم برنده این مقایسه هست و رنگ متن داخل اون تگ h1 به رنگ سبز نمایش داده میشه.
و حالا یکی دیگه

h2.grape {color: purple;}  /* 0,0,1,1 (winner) */
h2 {color: silver;}  /* 0,0,0,1 */

در این مثال هم دستور اول مقدار بیشتری رو داره و در مقایسه برنده میشه.
و آخرین مثال

html > body table tr[id="totals"] td ul > li {color: maroon;}  /* 0,0,1,7 */
li#answer {color: navy;}  /* 0,1,0,1  (winner) */

در این مثال هم مقدار دوم به خاطر اینکه مقدار specificity بیشتری داره در مقایسه برنده میشه.
یه مورد رو هم متذکر بشم مقدار ها به شکل ارزش مدال ها در المپیک حساب میشه. شما اگر 100 تا مدال برنز داشته باشید و رقیب شما تنها 1 مدال نقره داشته باشه در رده بندی بالاتر قرار می گیره.

مثلا این دو مقدار رو در نظر بگیرید

0.0.0,24
و
0.0.1.0

در اینجا ارزش مقدار دوم بیشتره چون در جایگاه بالاتری قرار داره.

حالا اینها رو شما حساب کنید و جواب رو بنویسید. برای تمرینه

Style="" 
#wrapper #content {} 
#content .datePosted {}
div#content {}
#content {}
p.comment .dateposted {}
p.comment{}
div p {}
p {}

یه بخش کوچیکش هم مونده که مربوط میشه به دستور important! که اون رو هم سر فرصت توضیح میدم

منبع
سایت خودم :mrgreen:

 

[mohseni12345]

سلام
ممنون
مدتها دنبال یه همچین چیزی بودم

ولی یه مشکل هست. من نتونستم از این خصوصیت استفاده کنم
میشه یه کد کامل بزاری

منظورم از کامل اینه که انواع حالتهای ممکن رو توش به کار ببری

 

[amirabbas_p30magazine]

من متوجه نشدم منظور شما چیه
بحث سر خصوصیت نیست. بحث سر تعیین specifity هر دستور CSS هست. ما اصولش رو گفتیم. حالا شما با استفاده از اطلاعات داخل این مقاله باید بتونید ارزش هر دستور رو تعیین کنید و متوجه بشید که در بین دو دستور CSS کدوم ارزش بیشتری داره. حالت های مختلف نوشتن کد های سی اس اس بی نهایته و نمیشه کلیه حالت های ممکن نوشتن کد رو نوشت.

 

[mohseni12345]

ببخشید من اشتباه کردم
فکر کردم میشه با این کار به هر خصوصیتی که خواصتیم الویت بالاتر یا پایین تری بدیم

 

[NabiKAZ]

خب خب خب !
به نظر من بحث بسیار خوب و جالبیه .

یادم میاد یه مطلب در مورد css میخوندم یه جاش در حد یه خط نوشته بود که css های درون تگ ها در اولویت اول هستند بعد از اون css های درون style جاری صفحه و پس از اون style های درون فایلهای خارجی در اولویت هستند. در آخرهم به این جمع بندی رسیده بود که css هایی که به لحاظ فاصله به متون ما نزدیک تر هستند از اولویت بالاتری برخوردار هستند.
البته شما در مقاله بالا این مطلب رو ریز تر بررسی کردید.

در مورد تمرینی که در آخر آوردید، راستش با اینکه نمیدونم منبعتون کجاست اما وقتی بخشی از کد تمرین رو در گوگل سرچ کردم به یه مقاله به زبان چینی یا ژاپنی برخورد کردم که جواب همین تمرین رو عیناً نوشته بود!!!
البته این رو هم بگم قبلش با برداشت های شما از مقاله جواب رو نوشتم و بعد مقایسه که کردم دیدم پاسخم درست بوده.
ضمنا شما در ابتدای خط دوم از تمرین یه کارکتر # رو جا انداختید !
این رو هم اضافه کنم که تمامی دستورات تمرین به ترتیب اولویت اجرا ، نوشته شدند و این مطلب پس از محاسبه اولویت تک تک خطوط ، مشخص میشه.
اینم پاسخ:

Style="" 			1,0,0,0
#wrapper #content {} 		0,2,0,0
#content .datePosted {}		0,1,1,0
div#content {}			0,1,0,1
#content {}			0,1,0,0
p.comment .dateposted {}	0,0,2,1
p.comment{}			0,0,1,1
div p {}			0,0,0,2
p {}				0,0,0,1

باتشکر
نبی

 

[amirabbas_p30magazine]

ممنون
اون # رو به خط دوم تمرین اضافه کردم
این تمرینها فکر کنم داخل کتاب CSS Mastery بود نوشته آقای Andy Budd
کتابش هم بسیار کتاب جالبیه. حتما مطالعه کنید

 

[NabiKAZ]

نسخه free کتاب رو پیدا نکردم.

 

[amirabbas_p30magazine]

نبی جان اون کتاب تجاریه. نسخه مجانی نداره
از اینجا دانلود کن

h**p://rapidshare.de/files/23449341/1590596145.zip