అనేక నియమాలు ఒక మూలకను స్టైల్ చేయగలిగినప్పుడు, రెండు విధానులు ఫలితాన్ని నిర్ణయిస్తాయి: కాస్కేడ్ (ఏ నియమ గెలుస్తుంది) మరియు వారసత్వం (ఏ లక్షణాలు తల్లిదండ్రుల నుండి సంతానానికి పిలుస్తాయి).
బ్రౌజర్ ప్రాధాన్యత క్రమంలో తనిఖీ చేసి విజయవంత ప్రకటనను ఎంచుకుంటుంది:
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
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) */
కొన్ని లక్షణాలు (ఎక్కువగా పాఠ్యం-సంబంధిత) సంతానం ద్వారా స్వయంచాలకంగా వారసత్వం పొందుతాయి; చాలా అలా కాదు.
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.
.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 ను మాయా కంటే rather icted చేస్తాయి.