كيف يقرر التسلسل الهرمي والوراثة أي الأنماط يتم تطبيقها؟

Question

Accepted Answer

عندما يمكن لعدة قواعد أن تُطبّق نمطًا على عنصر، آليتان تقرران النتيجة: **التسلسل الهرمي** (أي قاعدة تفوز) و**الوراثة** (أي خصائص تنتقل من العناصر الأب).

## التسلسل الهرمي — حل التعارضات، بالترتيب

يختار المتصفح التصريح الفائز بالتحقق، بترتيب الأولويات:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## الوراثة — بعض الخصائص تنتقل إلى العناصر الفرعية

خصائص معينة (في الغالب **المتعلقة بالنص**) يرثها العناصر الفرعية تلقائيًا؛ معظمها لا يرث.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**موروثة** بشكل افتراضي: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **غير موروثة**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## التحكم في الوراثة بشكل صريح

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## ملخص الخصوصية ضمن التسلسل الهرمي

هذا هو السبب في أن قاعدة منخفضة الخصوصية قد تخسر حتى لو كُتبت لاحقًا — يتم التحقق من الخصوصية *قبل* ترتيب المصدر. فهم الترتيب (الأهمية → الخصوصية → ترتيب المصدر) يشرح تقريبًا كل حالة "نمطي لا ينطبق".

## لماذا هذا مهم

التسلسل الهرمي والوراثة هما النموذج الأساسي لـ *كيفية حل CSS فعليًا*.

معرفة ترتيب الأولويات تصحح التعارضات، ومعرفة الخصائص التي ترث تسمح بتعيين `color`/`font` مرة واحدة على `body` بدلاً من كل مكان، و`inherit`/`initial`/`unset` توفر لك تحكمًا دقيقًا — معًا تجعل CSS قابل للتنبؤ به بدلاً من أن يكون سحرًا.