क्रोम के devtools का उपयोग कर तत्व का निरीक्षण करते समय, तत्व टैब में, दाईं ओर 'स्टाइल' बार संबंधित सीएसएस गुण दिखाता है। कभी-कभी, इनमें से कुछ गुणों को मारा जाता है। इन गुणों का क्या अर्थ है?Google क्रोम devtools में पार शैली शैली क्या मतलब है?
जब कोई सीएसएस संपत्ति हिट-थ्रू के रूप में दिखाई देती है, तो इसका मतलब है कि क्रॉस-आउट शैली लागू की गई थी, लेकिन फिर एक अधिक विशिष्ट चयनकर्ता, एक और स्थानीय नियम, या बाद में एक ही संपत्ति के भीतर संपत्ति द्वारा ओवरराइड किया गया।
(विशेष मामले: यदि स्टाइल किसी मिलान नियम में मौजूद है तो एक शैली को भी प्रभावित किया जाएगा, लेकिन टिप्पणी की गई है, या यदि आपने Chrome डेवलपर टूल के भीतर इसे अनचेक करके इसे मैन्युअल रूप से अक्षम कर दिया है। भी रूप में बाहर पार कर गया, लेकिन एक त्रुटि आइकन के साथ, शैली में सिंटेक्स त्रुटि है, तो दिखाई देते हैं।)
उदाहरण के लिए, यदि एक पृष्ठभूमि रंग सभी div रों करने के लिए लागू किया गया था, लेकिन एक अलग पृष्ठभूमि रंग के साथ div रों करने के लिए लागू किया गया था एक निश्चित आईडी, पहला रंग दिखाई देगा लेकिन पार हो जाएगा, क्योंकि दूसरे रंग ने इसे बदल दिया है (उस आईडी के साथ div के लिए संपत्ति सूची में)।
एक तरफ ध्यान दें, क्रॉस-आउट गुणों को उसी नामित गुणों द्वारा बाद में उसी सीएसएस नियम (जैसे सीएसएस स्पेक की आवश्यकता होती है) द्वारा "रद्द" किया जा सकता है। –
@JacobM: कैसे पता चलेगा कि संपत्ति स्ट्राइक संपत्ति को ओवरराइड कर रही है । – ArunRaj
@ अरुणराज - यह बताने का कोई आसान तरीका नहीं है कि कौन सी संपत्ति (या गुण) क्रॉस-आउट को ओवरराइड कर रही है।एक विकल्प एक ही संपत्ति प्रकार खोजने के लिए "गणना" शैलियों टैब को देखना है, और फिर यदि आप इसे विस्तारित करते हैं तो आपको उस प्रॉपर्टी को लागू करने का प्रयास करने वाले विभिन्न नियमों का स्रोत देखना चाहिए (जिसमें वास्तव में सक्रिय है) । तो यदि आप देखते हैं कि "फ़ॉन्ट-आकार: 11 पीएक्स" पार हो गया है, तो "फ़ॉन्ट-आकार" के लिए गणना गुणों को देखें, और आपको उन सभी स्थानों को देखना चाहिए जो वास्तव में सक्रिय एक सहित फ़ॉन्ट आकार लागू होते हैं। उम्मीद है की यह मदद करेगा। –
उपर्युक्त उत्तर के अतिरिक्त मैं भी स्ट्राइक आउट संपत्ति के मामले को हाइलाइट करना चाहता हूं जो वास्तव में मुझे हैरान करता है।
आप एक div करने के लिए एक पृष्ठभूमि छवि जोड़ रहे हैं:
<div class = "myBackground">
</div>
आप छवि को मापना div के आयाम में फिट करने के लिए तो यह अपनी सामान्य वर्ग परिभाषा होगा चाहते हैं।
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
लेकिन यदि आप के रूप में आदेश की अदला-बदली: - क्रोम में तो
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
आप पृष्ठभूमि आकार के रूप में बाहर striked देखेंगे। मुझे यकीन नहीं है कि यह क्यों है, लेकिन हाँ आप इसके साथ गड़बड़ नहीं करना चाहते हैं।
एक तरफ नोट पर। यदि आप @media क्वेरी (जैसे @media screen (max-width:500px) का उपयोग कर रहे हैं) के बाद @media क्वेरी लागू करने पर विशेष ध्यान दें, आप सामान्य शैलियों के साथ किए जाते हैं। चूंकि @media क्वेरी को पार किया जाएगा (भले ही यह अधिक विशिष्ट हो) यदि सीएसएस द्वारा पीछा किया जाता है जो समान तत्वों का उपयोग करता है। उदाहरण: जब आप कॉपी और कहीं सीएसएस कोड पेस्ट
@media (max-width:750px){
#buy-box {width: 300px;}
}
#buy-box{
width:500px;
}
** width will be 500px and 300px will be crossed out in Developer Tools. **
#buy-box{
width:500px;
}
@media (max-width:750px){
#buy-box {width: 300px;}
}
** width will be 300px and 500px will be crossed out **
कोई समस्या दोस्त नहीं: डी – sanjihan
कुछ ऐसे अवसर है और यह प्रारूप टूट जाता है तो क्रोम पीले रंग की चेतावनी दिखा। आपको फिर से सीएसएस कोड को दोबारा सुधारने की कोशिश करनी चाहिए और यह ठीक होना चाहिए।
प्रश्न "पीले चेतावनियों" के बारे में कुछ भी नहीं पूछा। इस उत्तर को सबसे अच्छी टिप्पणी चाहिए। – Simon
यदि आप हिट-ट्रफ संकेत प्राप्त करने के बाद भी शैली को लागू करना चाहते हैं, तो आप शैली को लागू करने के लिए "!important" का उपयोग कर सकते हैं। यह सही समाधान नहीं हो सकता है लेकिन समस्या का समाधान हो सकता है।
मुझे इस प्रश्न की उम्मीद थी। इसके लिए +1। –