CSS के लिए पूर्वता का क्रम क्या है?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि मेरी सीएसएस कक्षाओं में से एक दूसरे को ओवरराइड क्यों कर रही है (और अन्य तरीके से नहीं)

यहां मेरे पास दो सीएसएस कक्षाएं हैं

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

और मेरे विचार में मैं फोन करता हूं

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

फ़ॉन्ट (अतिव्यापी तत्व) 20 के बजाय 10px के रूप में दिखाता है - क्या कोई समझा सकता है कि यह मामला क्यों है?

Comments

क्या आप सीएसएस प्री-प्रोसेसर का उपयोग कर रहे हैं? मुझे लगता है कि आपके पास वह है @extend .smallbox;, जो गैर-मानक सीएसएस जैसा दिखता है।

— जारेड फरिश

आपको वास्तव में गठबंधन नहीं करना चाहिए @extend- अगर यह वही करता है जो मुझे लगता है कि यह करता है - और एक ही तत्व पर दोनों चयनकर्ताओं का उपयोग करना।

— मिलीमो

SMACSS केवल "उपवर्ग" (यानी .smallbox-paysummary) में परिवर्तित गुणों को शामिल करने की अनुशंसा करता है , और वैकल्पिक रूप से CSS घोषणा को और अधिक स्पष्ट रूप से विशिष्ट बनाता है (सीएसएस फ़ाइल में उपस्थिति के आदेश पर भरोसा किए बिना).smallbox.smallbox-paysummary { font-size: 10px; }

— millimoose

और अगर आप नहीं चाहते कि .smallbox-paysummaryछोटे फॉन्ट का होना, तो आप इसे पहले से छोटा क्यों बना रहे हैं?

— मिलीमो

अब मैं सोच रहा हूं कि अगर दोनों नियमों में एक जैसी विशिष्टता है तो तत्व के वर्ग गुण पर बाद में घोषित किया गया है, सीएसएस नियमों के आदेश की परवाह किए बिना पूर्ववर्तीता नहीं लेनी चाहिए।

— एंडी

Answer 1

कई नियम हैं (इस क्रम में लागू):

1. इनलाइन सीएसएस (html शैली विशेषता) स्टाइल टैग और सीएसएस फ़ाइल में सीएसएस नियमों को ओवरराइड करता है
2. अधिक विशिष्ट चयनकर्ता कम विशिष्ट पर पूर्वता लेता है
3. कोड में बाद में आने वाले नियम पहले के नियमों को ओवरराइड करते हैं यदि दोनों में समान विशिष्टता हो।
4. एक सीएसएस नियम !importantहमेशा पूर्वता लेता है।

आपके मामले में इसका नियम 3 जो लागू होता है।

एकल चयनकर्ताओं के लिए उच्चतम से निम्नतम:

• आईडी (उदाहरण: #mainचयन <div id="main">)
• वर्गों (पूर्व .: .myclass), विशेषता चयनकर्ताओं (पूर्व .: [href=^https:]) और छद्म वर्गों (पूर्व .: :hover)
• तत्वों (पूर्व .: div) और छद्म तत्वों (पूर्व .: ::before)

दो संयुक्त चयनकर्ताओं की विशिष्टता की तुलना करने के लिए, ऊपर दिए गए प्रत्येक विशिष्टता समूहों के एकल चयनकर्ताओं के होने की संख्या की तुलना करें।

उदाहरण: तुलना #nav ul li a:hoverकरने के लिए#nav ul li.active a::after

• आईडी चयनकर्ताओं की संख्या की गणना करें: प्रत्येक के लिए एक है ( #nav)
• वर्ग चयनकर्ताओं की संख्या की गणना करें: प्रत्येक ( :hoverऔर .active) के लिए एक है
• तत्व चयनकर्ताओं की संख्या की गणना करें: ul li aपहले के लिए 3 ( और दूसरे के लिए 4 ul li a ::after) हैं, इस प्रकार दूसरा संयुक्त चयनकर्ता अधिक विशिष्ट है।

सीएसएस चयनकर्ता विशिष्टता के बारे में एक अच्छा लेख ।

Comments

विशिष्टता इनलाइन शैली घोषणाओं को कैसे ओवरराइड करती है?

— जेरेड फरिश

"... स्टाइल टैग में सीएसएस नियम ... सीएसएस फ़ाइल में नियम ओवरराइड करता है"। मैंने हाल ही में इस मिथक को कुछ बार देखा है। मुझे नहीं पता कि यह कहाँ से आता है, लेकिन यह बकवास है।

— अलोहसी

@jared मैंने पहले दो अंक लिए। क्या आपका यही मतलब है?

— लॉरेंज मेयर

हां, मेरा यही मतलब था।

— जेरेड फरिश

@ पाकीपत :hoverएक वर्ग चयनकर्ता नहीं है , बल्कि एक छद्म श्रेणी चयनकर्ता है।

— लोरेन्ज़ मेयर

Answer 2

यहाँ एक आरेख में सीएसएस स्टाइलिंग ऑर्डर का संकलन है, जिस पर सीएसएस के नियमों में उच्च प्राथमिकता है और बाकी पर पूर्वता लें:

अस्वीकरण : मेरी टीम और मैंने इस टुकड़े को एक ब्लॉग पोस्ट ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) के साथ मिलकर काम किया है जो मुझे लगता है कि सभी फ्रंट-एंड के लिए काम आएगा डेवलपर्स।

Comments

उस आरेख को एक विशेष मानसिकता की आवश्यकता है। मेरे लिए यह समझना अधिक कठिन है कि स्टाइल इनहेरिटेंस की तुलना में आरेख।

— लॉरेंज मेयर

Answer 3

हम यहां जो देख रहे हैं, उसे विशिष्टता कहा जाता है जैसा कि मोज़िला द्वारा कहा गया है :

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

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

मुझे https://specifishity.com पर 0-0-0 की व्याख्या पसंद है :

काफी वर्णनात्मक !importantनिर्देशन की तस्वीर ! लेकिन कभी-कभी यह इनलाइन styleविशेषता को ओवरराइड करने का एकमात्र तरीका है । इसलिए दोनों से बचने की कोशिश करना एक सर्वोत्तम अभ्यास है।

Comments

अति उत्कृष्ट। मुझे इसकी ही खोज थी। यह ग्राफिक शानदार लोल है।

— saran3h

Answer 4

सबसे पहले, आपके @extendनिर्देश के आधार पर , ऐसा लगता है कि आप शुद्ध CSS का उपयोग नहीं कर रहे हैं, लेकिन SASS os Stylus जैसे एक पूर्वप्रक्रमक।

अब, जब हम सीएसएस में "पूर्वता के आदेश" के बारे में बात करते हैं, तो एक सामान्य नियम शामिल होता है: अन्य नियमों के बाद निर्धारित किए गए नियम (एक टॉप-डाउन फैशन में) लागू होते हैं। आपके मामले में, .smallboxबाद में निर्दिष्ट करके.smallbox-paysummary आप अपने नियमों की पूर्वता को बदल पाएंगे।

हालाँकि, यदि आप थोड़ा और आगे जाना चाहते हैं, तो मैं यह पढ़ने का सुझाव देता हूं: सीएसएस कैस्केड डब्ल्यू 3 सी विनिर्देश । आप पाएंगे कि किसी नियम की पूर्ववर्ती स्थिति निम्न पर आधारित है:

1. वर्तमान मीडिया प्रकार;
2. महत्त्व;
3. मूल;
4. चयनकर्ता की विशिष्टता, और अंत में हमारे प्रसिद्ध नियम:
5. कौन सा निर्दिष्ट है।

Answer 5

W3 में स्थिति है: W3 Cascade CSS

ऑर्डन जो कि अलग-अलग स्टाइल की शीट लगाई जाती है, वह निम्नलिखित है (डब्ल्यू 3 कैस्केडिंग सेक्शन का उद्धरण):

1. उपयोगकर्ता एजेंट घोषणाएँ

2. उपयोगकर्ता सामान्य घोषणाएँ

3. लेखक सामान्य घोषणाएँ

4. लेखक महत्वपूर्ण घोषणाएँ

5. उपयोगकर्ता महत्वपूर्ण घोषणाएँ

संदर्भित W3 दस्तावेज़ में इसके बारे में अधिक जानकारी

Answer 6

Html एलिमेंट में कक्षाएं जिस क्रम में दिखाई देती हैं, वह मायने नहीं रखती है, वह कौन सी संख्या होती है, जिसमें वह क्रम होता है जिसमें ब्लॉक स्टाइल शीट में दिखाई देते हैं।

आपके मामले .smallbox-paysummaryमें .smallboxइसलिए 10px पूर्वता के बाद परिभाषित किया गया है।

Answer 7

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

इनलाइन सीएसएस (html शैली विशेषता) स्टाइल टैग और सीएसएस फ़ाइल में सीएसएस नियमों को ओवरराइड करता है

एक अधिक विशिष्ट चयनकर्ता कम विशिष्ट पर पूर्वता लेता है।

कोड में बाद में आने वाले नियम पहले के नियमों को ओवरराइड करते हैं यदि दोनों में समान विशिष्टता हो।

Comments

यहाँ एक अच्छी व्याख्या है: vanseodesign.com/css/css-specificity-inheritance-cascaade

— akostadinov

@ माही मैंने इस समय के माध्यम से आपके सुझाए गए संपादन को लहराया, लेकिन भविष्य में, कृपया इसे लंबे समय तक संपादित करने के लिए कचरे को केवल एक एड में न जोड़ें। एक दूसरे को संपादित करने से कि "पहले से" नुकसान बहुत बुरा अभ्यास है, समीक्षकों के लिए बहुत ही अनपेक्षित है, और आवश्यकता से अधिक काम बनाता है। इसके बजाय, बस अन्य चीजों की तलाश करें जिन्हें बेहतर किया जा सकता है (जैसे वर्तनी या व्याकरण)।

— सिगुजा

Answer 8

यह भी नोट करना महत्वपूर्ण है कि जब आपके पास HTML तत्व पर दो शैली समान पूर्वता के साथ होती हैं, तो ब्राउज़र उन शैलियों को वरीयता देगा जो पिछले डोम को लिखे गए थे ... इसलिए यदि DOM में है:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... div की चौड़ाई 50px होगी

Comments

यह वास्तव में पूर्वता नहीं है, यह कैस्केडिंग स्टाइल शीट्स का कैस्केडिंग हिस्सा है।

— टायलरएच