2012-09-08 10 views
10

मैंने @import के साथ शैलियों को ओवरराइड करने के बारे में कुछ समान प्रश्न देखे हैं, लोग नीचे @import डालते हैं, लेकिन ऐसा लगता है कि यह यहां काम नहीं करता है।@import के साथ सीएसएस शैलियों को ओवरराइड करना

--- index.html --- 
<head> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
This text should be green. 
</body> 

--- style.css --- 
body {color: red;} 
@import url('style-override.css'); 

--- style-override.css --- 
body {color: green;} 

इच्छा उत्पादन लाल पाठ ऊपर के उदाहरण है, जबकि हरी की उम्मीद है। सिर के अंदर style.css के बाद

  • घोषणा शैली-override.css समस्या का समाधान होगा, लेकिन मैं @import अंदर एक सीएसएस फ़ाइल का उपयोग करना चाहते हैं।

  • जोड़ना! महत्वपूर्ण शैली-ओवरराइड.css में अपेक्षित परिणाम भी मिलेगा, लेकिन यह काम नहीं करना चाहिए।

क्या कोई इसे समझा सकता है?

उत्तर

22

यह काम नहीं कर रहा है क्योंकि स्टाइलशीट के अंदर घोषित कोई भी आयात नियम बाकी सब से पहले आना चाहिए - अन्यथा, ... अच्छा, यह काम नहीं करता है;)।

तो, क्या आप अपने style.css स्टाइलशीट में होना चाहिए:

@import url('style-override.css'); 
body {color: red;} 
+0

ठीक है, भले ही @import नीचे घोषित किया गया हो, तो मुझे पहले अनुमान लगाया जाएगा। मैं वास्तव में बस एक वेबसाइट पर पढ़ा। ऐसा लगता है कि सिर के अंदर सीएसएस घोषित करना या जोड़ना! महत्वपूर्ण ही एकमात्र तरीके हैं। धन्यवाद। – user1643156

+0

ओह हाँ, जाहिर है। मैं इसके बारे में भी सोच नहीं रहा था। आयातित नियम अभी भी ओवरराइड हैं, क्योंकि इस मामले में 'शरीर {रंग: लाल;} 'के बाद आता है। – banzomaikaka

12

@import नियम शीर्ष पर होना चाहिए। यह वही है CSS spec. इसके बारे में कहते हैं:

किसी भी @import नियम (एक शैली पत्रक में-पर नियम सभी अन्य और शैली नियमों पूर्व में होना चाहिए @ अक्षरसेट के अलावा, जो अगर यह शैली पत्रक में पहली बात यह होना चाहिए मौजूद है), या फिर @import नियम अमान्य है।

संबंधित मुद्दे

 संबंधित मुद्दे