جستجو برای:
سبد خرید 0
  • مطالب
  • تالار گفتگو
  • نمونه کارها
  • درباره ما
  • دوره آموزشیجدید
    • Css
    • تست در برنامه های دات نت
    • آشنایی با Canvas
  • تماس با ما
SarezCodes - سعید رضایی

ورود

گذرواژه خود را فراموش کرده اید؟

ثبت نام

داده های شخصی شما برای پشتیبانی از تجربه شما در این وب سایت، برای مدیریت دسترسی به حساب کاربری شما و برای اهداف دیگری که در سیاست حفظ حریم خصوصی ما شرح داده می شود مورد استفاده قرار می گیرد.

SarezCodes - سعید رضایی
  • مطالب
  • تالار گفتگو
  • نمونه کارها
  • درباره ما
  • دوره آموزشیجدید
    • Css
    • تست در برنامه های دات نت
    • آشنایی با Canvas
  • تماس با ما
ورود
0

وبلاگ

SarezCodes - سعید رضاییمحتوادوره آموزشیCssجلسه دوم : بررسی تاثیر specificity

جلسه دوم : بررسی تاثیر specificity

30 دی 1399
ارسال شده توسط شراره قمیصی
Css، دوره آموزشی
140 بازدید
زمان مطالعه: 3 دقیقه

Specificity در CSS یعنی چگونه مرورگراهمیت، وابستگی و ارجحیت المان های CSS را تعیین می کند.
در اینجا ابتدا Selectorهای Css را مرور می کنیم:
1-Type selectors
2- Pseudo element
3-class selector
4-َattribute selector
5-pseudo classes
6-ID selector
7-inline style

Selectors specificity
دومین مورد از specificity در مورد Selectorها صحبت می کند. به عنوان مثال یک Selector که دو تا کلاس دارد نسبت به Selectorای که یک کلاس دارد از اولویت بالاتری برخوردار است. اگر در یک declaration پس زمینه را نارنجی کنید اما تغییر مورد نظر اعمال نشود به این علت است که قانونی با اولویت بالاتر وجود دارد که آن را نقض می کند.
در ادامه بررسی می کنیم که چرا هنگام تغییر پس زمینه که در دنیای CSS اتفاق بسیار ساده ای می باشد این اتفاق می افتد .
قسمت آخر style sheet خود را مطابق کد زیر تغییر دهید

#main-nav 
a { color: white; background-color: #13a4a4;
 padding: 5px; border-radius: 2px;
 text-decoration: none; 
} 
.featured {
  background-color: orange; 
}

کدی که نوشته اید کار نمیکند؟ همه پیوندها را درست نوشته اید؟ پس چرا اعمال نمی شود؟

جواب مشخص است.Selector اول اولویت بالاتری نسبت به دومی دارد چرا که اولی از یکID  و یک Tag تشکیل شده است در حالیکه دومی فقط یک نام کلاس دارد.Selectorها نسبت به هم اولویت های متفاوتی دارند برای مثال ID اولویت بالاتری نسبت به کلاس دارد.در حقیقت یک ID اولیت بالاتری نسبت به چند تا Selector از هر نوعی دارد.به همین ترتیب یک Selector کلاس اولویت بالاتری نسبت به Tag دارد.

پس قوانین این بخش به شکل زیر می باشد:

1-اگر انتخابگر ID دارد بالاترین اولویت است.

2- اگر نتیجه یکسان باشد انتخابگری با تعداد کلاس بیشتر برنده می شود.

3-اگر این مورد هم یکسان باشدSelector با بیشترین تعداد نام Tag برنده می شود.

در قطعه کد پایین ترتیب اعمال انتخابگرها را بررسی می کنیم

html body header h1 {
color: blue;
}
body header.page-header h1 {
color: orange;
}
.page-header .title {
color: green;
}
#page-title {
color: red;
}

در مثال بالا با الویت ترین ، مورد چهار می باشد که یک ID دارد پس رنگ قرمز اعمال خواهد شد.مورد بعدی گزینه 3 می باشد که دو تا کلاس دارد . اگر گزینه سه چهار نبود گزینه سه اعمال می شد.گزینه سه هم اولویت بالاتری نسبت به دو دارد.(دو کلاس اولویت بالاتری نسبت به یک کلاس دارد.)گزینه آخر هم یک می باشد چراکه فقط Tag دارد.

توجه!

Pseudo classها و attribute های آن اولویت یکسانی با کلاس دارند.پس تاثیری روی اولویت بندی ندارند.هم چنینSelectorهای کلی * و > و + و … نیز تاثیری روی اولویت بندی ندارند.

اگر شماDeclaration را به CSS خود اضافه کردید و تاثیر آن را مشاهده نکردید معمولا به این دلیل است که یک قانون با الویت بالاتر آن را نقض می کند.بسیاری از اوقات توسعه دهندگان selectorها را با استفاده از ID می نویسند  بدون اینکه بدانند این ویژگی اولویت بالاتری را می دهد و در آینده به سختی می توان آن را کنار زد.برای حذف ID باید از یک Id دیگری استفاده کنید.

یک روش معمول برای مشخص کردن اولویت ها استفاده استفاده از یک شناسه ای است که از اعداد و ویرگول تشکیل شده است.برای مثال 2،2،1   که از یکID و دو کلاس و دوTag تشکیل شده است

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

table

اکنون مسئله مقایسه اعداد شناسه پیش می آید که کدامیک انتخاب می شود .ویژگی 1،0،0  نسبت به 0،2،2  و حتی 0،10،0 اولویت بالاتری دارد(هرچند که نوشتن ده کلاس با هم توصیه نمیشود) چراکه عدد اول اولویت بالاتری دارد.

گاهی اوقات افراد از یک علامت چهار تایی استفاده می کنند که از 0 و 1 تشکیل یافته است .که از این طریق از اجرای کدهایشان اطمینان حاصل کنند. در این مورد یک inline styleدارای اولویت 1،0،0،0 می باشد.این مورد می تواند تمامی موارد اعمال شده توسط سایر  selectorها را Override کند.حتی Selecrtorهای دارای ID .

در مقاله بعدی  در موردSpecificity consideration  صحبت خواهیم کرد.

Print Friendly, PDF & Email
برچسب ها: csscss in depthآموزش پایه ایآموزشCSSبرنامه نویسیزبان برنامه نویسی
قبلی جلسه اول:بررسی Cascade و کاربرد آن
بعدی بهترین الگوهای آزمایش واحد در NET Core. و NET Standard. قسمت دوم

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
برچسب‌ها
#C (3) css (12) css in depth (12) OOP (4) SOLID (5) unit test (4) آزمایش واحد (4) آزمون واحد (6) آموزشCSS (11) آموزش پایه ای (12) بازی ریاضی (4) بازی نویسی (2) برنامه نویسی (13) تست (5) توسعه آزمون محور (3) دات نت (1) ریاضی بازی (4) ریاضی در بازی (4) زبان برنامه نویسی (9) سی شارپ (3) شی گرایی (4) فناوری اطلاعات (3)
دسته‌ها
  • #C (6)
  • Css (13)
  • اصول طراحی (5)
  • بازی سازی (4)
  • بدون دسته بندی (3)
  • برنامه نویسی (20)
  • تست (7)
  • تست در برنامه های دات نت (6)
  • جاوا اسکریپت (1)
  • دوره آموزشی (19)
  • فناوری اطلاعات (5)
  • نگاه عمیق به سی شارپ (1)
نوشته‌های تازه
  • اصول طراحی SOLID در #C (قسمت آخر) 30 دی 1399
  • اصول طراحی SOLID در #C (قسمت چهارم) 30 دی 1399
  • اصول طراحی SOLID در #C (قسمت سوم) 30 دی 1399
  • اصول طراحی SOLID در #C (قسمت دوم) 30 دی 1399
  • اصول طراحی SOLID در #C (قسمت اول) 30 دی 1399
  • محبوب
  • جدید
  • دیدگاه ها
پشتیبانی

ما موضوع Sarez را نامگذاری کردیم، زیرا برای ما بهترین علامت های تجاری ساده هستند. رشد  برند ها در توانایی آنها درک می شود.

    2022© سارز کد SarezCodes
    اشتراک گذاری در شبکه های اجتماعی
    ارسال به ایمیل
    https://sarezcodes.ir/?p=2025
    • دسته بندی دوره ها
    • دوره های من
    • جستجو

    دسته بندی دوره ها

    دوره های من

    برای مشاهده خریدهای خود باید وارد حساب کاربری خود شوید

    جستجو

    مرورگر شما از HTML5 پشتیبانی نمی کند.