2011-10-03 16 views
9

मैं मुख्य शैली पत्रक फ़ाइल में @import का उपयोग कर एक और स्टाइलशीट आयात किया। मैंने जो परिवर्तन @import स्टाइलशीट मुख्य शैली पत्रक ओवरराइड करने के लिए बना दिया है चाहते हैं। क्या यह संभव है?मुख्य स्टाइलशीट को ओवरराइड करने के लिए मैं अपनी @import स्टाइलशीट कैसे प्राप्त करूं?

+2

मुख्य स्टाइल शीट के बाद @import करें और आपको ठीक होना चाहिए –

+0

बस इसे आजमाया और अब यह – Kenshi

उत्तर

9

अपने लक्ष्य को एक और स्टाइलशीट आयात करके शैलियों को ओवरराइड करने के लिए है, तो आप प्राथमिकता का क्रम का उपयोग करना चाहिए।

<head> 
    <title>Title</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <link href="style-override.css" rel="stylesheet" type="text/css" /> 
</head> 

यहाँ style.css मूल है और style-override.css अपने नए कस्टम सीएसएस होते हैं। ये शैलियों style.css से शैलियों को ओवरराइड कर देंगे। इसका मतलब है कि आपको !important का उपयोग करने की आवश्यकता नहीं होगी क्योंकि शैली ओवरराइट की गई है।

इससे बचें! जब भी आप कर सकते हैं महत्वपूर्ण!

@import

<style type="text/css"> 
    @import url("style.css"); 
    @import url("style-override.css"); 
</style> 
एक पक्ष नोट के रूप में

भी ऐसा करने के लिए यदि आप इसके बजाय, पृष्ठ से सभी शैलियों हटा एक सीएसएस रीसेट का उपयोग करें।

<style type="text/css"> 
    @import url("style.css"); 
    @import url("reset.css"); 
    @import url("style-override.css"); 
</style> 

http://meyerweb.com/eric/tools/css/reset/ पर एक सीएसएस रीसेट देखें और इसे reset.css में जोड़ें।

+0

यह काम किया धन्यवाद! – Kenshi

3

@import पहले के अंत में दूसरी स्टाइलशीट।

आप !important और @import

+0

लोड करने का प्रयास नहीं किया गया है @i अंत में mport यह अब सीएसएस लोड नहीं कर रहा है। मैं इसका उपयोग नहीं करना चाहता! महत्वपूर्ण है क्योंकि मुझे वह सब कुछ करना होगा जो मैं बदलना चाहता हूं, वहां एक आसान तरीका होना चाहिए। – Kenshi

1

अपने दूसरे स्टाइलशीट ही चयनकर्ताओं का उपयोग करता है भ्रमित कर रहे हैं, तो यह किसी भी समस्या के बिना पहली ओवरराइड करना चाहिए।

सीएसएस का निर्धारण करने के लिए प्राथमिकता का एक बहुत सख्त क्रम है जिसका उपयोग किया जाना चाहिए, लेकिन यदि अन्य सभी बराबर हैं और दो शैलियों में बिल्कुल वही प्राथमिकता स्तर है, तो यह अंतिम रूप से निर्दिष्ट एक का उपयोग करेगा। यह आपको बाद में उसी चयनकर्ता को दोहराकर बस एक शैली को ओवरराइड करने की अनुमति देता है।

इसका एकमात्र अपवाद अगर पहली शैली !important के रूप में निर्दिष्ट किया गया है। इस मामले में, इसे ओवरराइड करना बहुत कठिन है। यहां तक ​​कि !important के रूप में एक और शैली को निर्दिष्ट कर सकते हैं हमेशा (मैं मामलों को देखा है, जहां यह कुछ ब्राउज़रों में काम नहीं किया है, लेकिन अन्य) काम नहीं।

तो यदि पिछली स्टाइलशीट !important का उपयोग करती है तो आपको इसे ओवरराइड करने में समस्या हो सकती है। लेकिन यदि नहीं, तो यह काफी सरल होना चाहिए।

0

यह समाधान मेरे लिए सही काम कर रहा है।

अपने main.css की प्रति बनाएं और इसे style.css पर पुनर्नामित करें। main.css में सब और अतीत को हटा दें:

@import url("style.css"); 
@import url("style-override.css"); 

यही सब।

0

आप और अधिक विशिष्ट वर्ग के नाम का उपयोग कर सकते हैं - आप बस overqualified कि चयनकर्ताओं सबसे अच्छा नहीं कर रहे हैं ध्यान में रखना, नए सीएसएस उपयोग

body div#sample { 
max-width: 75%; 
} 

पर

div#sample { 
max-width: 75%; 
} 

को बदलना चाहते हैं, उदाहरण के लिए विचार;)

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