जेव्हा अनेक नियम घटकाला शैली देऊ शकतात, तेव्हा दोन यंत्रणा निकाल ठरवतात: कास्केड (कोणता नियम जिंकतो) आणि इनहेरिटन्स (कोणते गुणधर्म माता-पितांकडून खाली येतात).
ब्राउজर प्राधान्य क्रमानुसार तपास करून विजयी घोषणा निवडतो:
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 ला जादूकरीपणे ऐवजी अनुमानयोग्य बनवतात.
सविस्तर उत्तरांसह IT मुलाखत प्रश्नांचे ग्रंथालय — Junior पासून Senior पर्यंत.
देणगी द्या