सीएसएस स्टाइलशीट किस क्रम में ओवरराइड करते हैं?

157

एक HTML हेडर में, मुझे यह मिल गया है:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssमेरी पृष्ठ-विशिष्ट शीट है। master.cssएक शीट है जिसका उपयोग मैं अपने प्रत्येक प्रोजेक्ट पर ब्राउज़र की चूक को ओवरराइड करने के लिए करता हूं। इनमें से कौन सी स्टाइलशीट प्राथमिकता लेती है? उदाहरण: पहली शीट में विशिष्ट है

body { margin:10px; }

और संबंधित सीमाएँ, लेकिन दूसरे में मेरे रीसेट शामिल हैं

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

संक्षेप में, क्या सीएसएस का कैस्केडिंग तत्व स्टाइलशीट संदर्भों के समान काम करता है जैसा कि विशिष्ट सीएसएस कार्यों में होता है? मतलब यह है कि अंतिम पंक्ति को प्रदर्शित किया जाता है?

css overriding stylesheet

— ian5v
स्रोत

मुझे अभी पता चला है कि यह वेबमास्टर्स के लिए बेहतर अनुकूल होगा। क्या इसे पोस्ट करने के लिए एक बेहतर जगह होगी?

— ian5v

10

यहाँ अच्छा है।

— ब्लेंडर

4

body:not(input="button")वैसे कोई वैध चयनकर्ता नहीं है। आप शायद इसे में विभाजित करने के लिए थे body, input:not([type="button"])।

— BoltClock

यह तो दिलचस्प है। मुझे विश्वास नहीं होता कि मैंने पहले ऐसा सिंटैक्स देखा है। मैं अभी भी नया हूं, लेकिन वे डबल ब्रैकेट मेरे लिए विदेशी हैं।

— ian5v

वे कोष्ठक विशेषता चयनकर्ताओं के लिए हैं: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: शायद आप स्टाइलशीट के क्रम को स्विच करना चाहते हैं: आपके सामान्य master.cssको पहले लोड करना चाहिए, फिर इसे खत्म करना आसान है अपने में मास्टर-स्टाइल styles.css।

— 15:22 बजे ग्रिल

163

CSS नियम कैस्केडिंग के नियम जटिल हैं - उन्हें बुरी तरह से विरोधाभास करने की कोशिश करने के बजाय, मैं आपको केवल कल्पना से परिचित कराऊंगा:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

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

— डस्कवफ-सक्रिय
स्रोत

1

फिर स्टाइलशीट को किस क्रम में लोड करने के लिए कोई विशिष्ट नियम नहीं है? मैं समझता हूं कि सीएसएस विशिष्टता के संदर्भ में कैसे प्रदर्शित करता है, लेकिन तब मैं मान लूंगा कि जब तक ओवरराइड नहीं होगा तब तक मेरी मास्टर शीट लोड होगी।

— ian5v

11

वास्तव में, !importantसीधे कैस्केड में भाग लेता है, और विशिष्टता के साथ इसका कोई लेना-देना नहीं है। विशिष्टता चयनकर्ताओं से संबंधित है, जबकि !importantसंपत्ति की घोषणाओं के साथ प्रयोग किया जाता है। (तो तुम सही कह रहे हैं कि नियम जटिल कर रहे हैं;!)

— BoltClock

2

तो क्या स्टाइलशीट तत्वों के समान ही लोड करते हैं, अंतिम पूर्वता लेते हुए अगर वे एक ही विशिष्टता के हैं?

— ian5v

3

@iananananan: मूल रूप से, ब्राउज़र व्यक्तिगत स्टाइलशीट के संदर्भ में CSS को कभी नहीं देखता है। यदि कई स्टाइलशीट हैं, तो उन्हें सभी के रूप में माना जाता है जैसे कि वे एक विशाल स्टाइलशीट थे, और नियमों के अनुसार मूल्यांकन किया जाता है।

— BoltClock

2

@ user34660 बोल्टकॉक की टिप्पणी सीएसएस स्टाइल के दृष्टिकोण से है। आप सही हैं कि स्टाइलशीट को DOM में अलग रखा गया है, लेकिन यह पृथक्करण प्रभावित नहीं करता है कि उन शैलियों को किसी भी चीज़ पर कैसे लागू किया जाए।

— डस्कवफ-एक्टिव-

31

सबसे विशिष्ट शैली लागू होती है:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

यदि सभी चयनकर्ताओं में एक जैसी विशिष्टता है, तो सबसे हाल के घोषणापत्र का उपयोग किया जाता है:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

आपके मामले में, body:not([input="button"])अधिक विशिष्ट है इसलिए इसकी शैलियों का उपयोग किया जाता है।

— ब्लेंडर
स्रोत

1

उस अंतिम चयनकर्ता के संबंध में प्रश्न पर मेरी टिप्पणी देखें।

— BoltClock

1

जब हम अन-एडिटेबल स्टाइलशीट को ओवरराइड करना चाहते हैं तो विशिष्टता नियम कठिन हो जाता है!

— अरी

23

आदेश मायने रखता है। एकाधिक घटना का अंतिम घोषित मूल्य लिया जाएगा। कृपया वही देखें जो मैंने काम किया है: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

यदि आप के ऑर्डर को इंटरचेंज करते हैं .test{}, तो आप देख सकते हैं कि HTML सीएसएस में घोषित अंतिम मान का मूल्य लेता है

— रॉय एमजे
स्रोत

3

तो आपको सबसे विशिष्ट CSS last में जोड़ना चाहिए।

— लाइव-लव

17

अंतिम लोडिंग CSS एक मास्टर है, जो सभी सीएसएस को एक ही सीएसएस सेटिंग्स के साथ ओवरराइड करेगा

उदाहरण:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

एच 1 टैग के लिए आउटपुट फ़ॉन्ट-आकार होगा: 30 पीएक्स;

— Doodl
स्रोत

1

नमस्ते। मेरे मामले में पहला परिभाषित .cssअंतिम लोड किया गया है। क्या उन्हें लागू किया जाता है ताकि वे लोड हो या क्रम में वे परिभाषित हों?

— यूजेन कोनकोव

धन्यवाद, यह बिल्कुल वही स्पष्टीकरण है जिसकी मुझे तलाश थी।

— हंटरइंजेरर

7

एक उदाहरण के साथ कैस्केडिंग नियम को सरल बनाने की कोशिश करें। नियम सामान्य से अधिक विशिष्ट हो जाते हैं।

आईडी के पहले (आदेश के बावजूद कक्षा और / या तत्वों पर) का नियम लागू करता है
आदेश की परवाह किए बिना तत्वों पर कक्षाएं लागू करता है
यदि कोई वर्ग या आईडी नहीं है, तो सामान्य वाले लागू होते हैं
एक ही समूह / स्तर के लिए ऑर्डर (फ़ाइल लोड ऑर्डर के आधार पर घोषणा क्रम) में अंतिम शैली लागू करता है।

यहाँ css और html कोड है;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

यहाँ सीएसएस शैली है

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

यहाँ परिणाम है। कोई फर्क नहीं पड़ता कि शैली की फाइलें या शैली की घोषणा का क्रम, id="important"अंत में लागू होता है (ध्यान दें कि class="deadline"घोषित अंतिम है लेकिन कोई प्रभाव नहीं लेता है)।

<article>तत्व शामिल <aside>तत्व, हालांकि पिछले घोषित शैली प्रभावी होगा, इस मामले में article h2 { .. } तीसरे h2 तत्व पर।

यहाँ IE11 पर परिणाम है: (छवि पोस्ट करने के लिए पर्याप्त अधिकार नहीं) DarkBlue: ह्यूस्टन क्रॉनिकल न्यूज़, डार्कग्रीन: आपके शहर में नवीनतम विकास, पर्पल: ह्यूस्टन स्थानीय विज्ञापन अनुभाग, काला: अगला भाग

— कगन अगुन
स्रोत

6

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

— prodigitalson
स्रोत

2

EDIT: Apr 2020, @ LeeC की टिप्पणी के अनुसार, अब ऐसा नहीं है

हां, यह उसी तरह काम करता है जैसे कि वे एक शीट में थे, हालांकि:

लोड आदेश मामलों!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

उपरोक्त कोड में, कोई गारंटी नहीं है कि master.cssबाद में लोड होगा styles.css। इसलिए, अगर master.cssजल्दी से लोड किया styles.cssजाता है , और थोड़ी देर लगती है, styles.cssतो दूसरी स्टाइलशीट बन जाएगी, और उसी विशिष्टता के किसी भी नियम को फिर से master.cssलिखा जाएगा।

तैनात करने से पहले अपने सभी नियमों को एक शीट (और minify) में डालने के लिए सर्वोत्तम है।

— n_i_c_k
स्रोत

एक पृष्ठ के <head> अनुभाग से लोड की गई लगभग पहचाने जाने वाली स्टाइल शीट को वैकल्पिक रूप से देखने के लिए विचार करें , एक सशर्त मीडिया विशेषता है जो स्मार्टफ़ोन और टैबलेट के लिए विशिष्ट स्टाइलशीट लोड करने के लिए है। इस मामले में, मीडिया में निर्दिष्ट तर्क प्रत्येक स्टाइलशीट के लिए कड़ाई से अनन्य होना चाहिए यदि लोड ऑर्डर अनिश्चित है।

— लिंडसे हैस्ले

@n_i_c_k आपका उत्तर गलत है। घोषणा का क्रम वही है जो मायने रखता है, भार आदेश नहीं। मैंने अभी इसे फिडलर के साथ डाउनलोड किया master.css, और डाउनलोड को styles.cssपूरी तरह से रोक दिया । फिर, मैंने master.cssलोड होने दिया । "ओवरलैपिंग" शैली को master.cssअभी भी लागू किया गया है - और प्रतिपादन master.cssलोड होने तक अवरुद्ध था और पार्स किया गया था। नोट : मैंने style.css` rel=preloadपर कोशिश की master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above ।

— लीसी

धन्यवाद @LeeC, मुझे पता है कि मेरा उत्तर लिखने के समय सही था, लेकिन मैं इसके लिए आपका शब्द लेता हूं कि यह अब तय हो गया है और मेरे उत्तर को संपादित करें।

— n_i_c_k

1

सबसे अच्छा तरीका है कि जितना संभव हो सके कक्षाओं का उपयोग करें। वैसे भी आईडी चयनकर्ताओं (#) से बचें। जब आप चयनकर्ताओं को सिर्फ एकल कक्षाओं के साथ लिखते हैं, तो सीएसएस उत्तराधिकार अधिक आसान तरीका है।

अपडेट: इस लेख में सीएसएस विशिष्टता के बारे में और पढ़ें: https://css-tricks.com/specifics-on-css-specificity/

— जीरो ओम्स
स्रोत

1

यह CSS विशिष्टता के बारे में एक बढ़िया लेख है: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

मुझे आपके प्रश्न से संदेह है कि आपके पास डुप्लिकेट चयन हैं, एक मास्टर सेट, जो सभी पृष्ठों के लिए जाता है, और एक अधिक विशिष्ट सेट जो आप प्रत्येक व्यक्तिगत पृष्ठ के लिए मास्टर मान को ओवरराइड करना चाहते हैं। अगर ऐसा है, तो आपका आदेश सही है। मास्टर को पहले लोड किया जाता है और बाद की फ़ाइल में नियम पूर्वता ले लेंगे (यदि वे समान हैं या समान वजन हैं)। इस वेबसाइट पर सभी नियमों का अत्यधिक अनुशंसित विवरण है http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ जब मैंने फ्रंट एंड डेवलपमेंट के साथ शुरुआत की, तो इस पृष्ठ ने इतने सारे प्रश्नों को मंजूरी दे दी।

— user3094826
स्रोत

0

यह कैस्केड है जो घोषणाओं की पूर्वता को परिभाषित करता है। मैं आधिकारिक विनिर्देश की सिफारिश कर सकता हूं; इसका यह भाग अच्छी तरह से पठनीय है।

https://www.w3.org/TR/css-cascade-3/#cascading

प्राथमिकता के अवरोही क्रम में छँटाई पर निम्नलिखित का प्रभाव पड़ता है।

उत्पत्ति और महत्व का संयोजन :
1. Transition घोषणाओं
2. उपयोगकर्ता एजेंट की घोषणाओं के साथ चिह्नित !important
3. उपयोगकर्ता की घोषणाओं के साथ चिह्नित !important
4. पृष्ठ लेखक की घोषणाओं के साथ चिह्नित !important
  1. तत्व पर परिभाषा के साथ styleविशेषता
  2. दस्तावेज़-व्यापी परिभाषाएँ
5. Animation घोषणाओं
6. पृष्ठ लेखक की घोषणाएँ
  1. तत्व पर परिभाषा के साथ styleविशेषता
  2. दस्तावेज़-व्यापी परिभाषाएँ
7. उपयोगकर्ता की घोषणाएं
8. उपयोगकर्ता एजेंट की घोषणाएँ
यदि दो घोषणाओं में एक ही मूल और महत्व है, तो विशिष्टता, जिसका अर्थ है कि तत्व को स्पष्ट रूप से कैसे परिभाषित किया गया है, एक स्कोरिंग की गणना करते हुए खेल में आता है।
- प्रत्येक पहचानकर्ता के लिए 100 अंक ( #x34y)
- हर वर्ग के लिए 10 अंक ( .level)
- प्रत्येक तत्व प्रकार के लिए 1 अंक ( li)
- प्रत्येक छद्म तत्व ( :hover) को छोड़कर 1 अंक:not
उदाहरण के लिए, चयनकर्ता के main li + .red.red:not(:active) p > *पास 24 की एक विशिष्टता है।
उपस्थिति का क्रम केवल एक भूमिका निभाता है यदि दो परिभाषाओं में एक ही मूल, महत्व और विशिष्टता है। बाद में परिभाषाएँ दस्तावेज़ में पहले की परिभाषाओं (आयातों सहित) से पहले आ गईं।

— माइकल श्मिट
स्रोत

0

मेरा मानना है कि कोड निष्पादित करते समय, यह ऊपर से नीचे तक पढ़ा जाता है, जिसका अर्थ है कि अंतिम सीएसएस लिंक इसके ऊपर किसी भी शैली की शीट में समान शैलियों को ओवरराइड करेगा।

उदाहरण के लिए, यदि आपने दो स्टाइल शीट बनाई हैं

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

और इन दोनों में, आपने बॉडी बैकग्राउंड-कलर को दो अलग-अलग रंगों में सेट किया है - style2.css में बॉडी का रंग प्राथमिकता देगा।

आप !IMPORTANTजिस वर्ग शैली को प्राथमिकता देना चाहते हैं, उसके अंदर प्रयोग करके या संभवतः अपने <link>आदेश को फिर से व्यवस्थित करके स्टाइल की प्राथमिकता के मुद्दे से बच सकते हैं ।

— एननाम होके
स्रोत