ویژگهای CSS یا CSS Specificity را یاد بگیرید

یک مرورگر چگونه کدهای CSS را میخواند ؟

/*Line 10*/
ul li a {
 color: red;
}

/*Line 90*/
ul li a {
 color: blue;
}

<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>

ویژگهای CSS یا CSS Specificity

#content .sidebar .module li a

به خاطر بسپارید

• ID ها ارزش بسیار بالایی نسبت به Class ها و یا المنت ها دارند، بنابراین سعی کنید تنها زمانی که واقعا نیاز دارید از ID استفاده کنید در غیر این صورت از ID استفاده نکنید.
• اگر چند سلکتور با وزن های یکسان تعریف شده اند، سکلتوری که دیرتر معرفی شده است اولویت بیشتری دارد.
• استایل هایی که درون تگ های HTML خود نوشته اید نسبت به سه دسته ی دیگر اولویت بیشتری دارند زیرا از رگ گردن به المنت شما نزدیک ترند.
• تنها راهی که میتوانید استایل های inline را override کنید این است که از !important استفاده کنید.
• کلاس های Pseudo و Attribute ها به اندازه ی همان Class های عادی وزن دارند.
• المنت ها Pseudo به اندازه ی همان المنت های عادی وزن دارند.
• سلکتور کلی * هیچ وزنی ندارد.

مثال هایی برای درک بیشتر

ul li a {
 color: red;
}

.content #sidebar {
 width: 30%;
}

.post p:first-letter {
 font-size: 16px;
}

p {
font-family: Helvetica, arial, sans-serif;
}

#title {
 font-weight: bold;
}

.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {
  font-weight: normal;
}

نتیجه گیری