विशिष्ट मूल्याची गणना. CSS निवडकांचे वजन समजून घेणे. वर्ग निवडक. CSS

समजा तुमच्याकडे अनेक निवडक आहेत जे समान घटकाचा संदर्भ देतात:

उघडत आहे HTML पृष्ठघटक कुठे आहे कालावधीघटकाच्या आत आहे divआपण अधोरेखित मजकूर पाहू. आणि जर आपण पुढे जाऊन प्लगइन वापरला तर फायरबगनेस्टेड एलिमेंटच्या स्टाईल पाहू या, आपण पुढील गोष्टी पाहू.

Div span ( मजकूर-सजावट:अधोरेखित; ) स्पॅन (मजकूर-सजावट:काहीही नाही;)

या वर्तनाच्या कारणाबद्दल त्वरित प्रश्न उद्भवतो. शेवटी, कॅस्केडिंग शैली दिल्यास, दुसऱ्या निवडकर्त्याने प्रथम ओव्हरलॅप करणे आवश्यक आहे. हे उदाहरण स्पष्टपणे दर्शवते की निवडक विशिष्टता काय आहे.

विशिष्टता नियम

निवडकर्त्यांची विशिष्टता स्टाईल शीटमध्ये त्यांचे प्राधान्य निश्चित करते.

CSS 2.1 स्पेसिफिकेशन या विषयासाठी एक लहान विभाग समर्पित करते. 4 नियम आहेत ज्याद्वारे निवडक विशिष्टतेची गणना केली जाते:

1. बहुतेक उच्च प्राधान्यविशेषता आहे शैली. हा नियम शैलींमध्ये वर्णन केलेल्या सर्व निवडकांना ओव्हरराइड करतो.
2. दुसरे स्थान उपस्थितीकडे जाते आयडीसिलेक्टरमध्ये (#some-id).
3. पुढे सर्व विशेषता येतात (विशेषणेसह वर्ग) आणि सिलेक्टरमधील छद्म-वर्ग.
4. घटकांची नावे आणि स्यूडो-एलिमेंट्स असलेल्या निवडकांना सर्वात कमी प्राधान्य असते.

सर्व 4 नियम एका प्रणालीमध्ये एकत्र केले आहेत a-b-c-d(जेथे a सर्वोच्च प्राधान्य आहे) आणि फॉर्म विशिष्टता.

विशिष्टतेचे उदाहरण - नियम #1:

सामग्री

मजकूर आतील घटक pआयडी (आयडी) सह निवडकर्त्याकडे दुर्लक्ष करून निळ्या रंगात प्रदर्शित केले जाईल, जेथे मालमत्ता देखील निर्दिष्ट केली आहे रंगअर्थासह लाल. नियम क्रमांक 1 नेहमी सर्व निवडकांना ओव्हरराइड करतो आणि त्याला सर्वोच्च प्राधान्य असते.

नियम #2:

• प्रथम
• दुसरा

निवडकर्ता असला तरी आयडीशीर्षस्थानी शैलींमध्ये सूचित केले आहे, हेच दस्तऐवजाच्या प्रदर्शनावर परिणाम करेल, कारण ते वर्ग असलेल्या निवडकर्त्यापेक्षा अधिक विशिष्ट आहे दुसरा.

नियम #3:

इनपुट फील्डमधील मजकूर ठळक दिसेल आणि दुसरा निवडकर्ता फक्त सबमिट विनंती बटण स्टाईल करेल.

चला या लेखाच्या पहिल्या उदाहरणाकडे परत येऊ - नियम क्रमांक 4:

पहिला निवडकर्ता दुसऱ्याला हरवतो कारण त्यात शेवटचे 2 विशिष्टता नियम समाविष्ट आहेत, तर दुसऱ्या निवडकर्त्याकडे फक्त एक आहे. मध्ये मजकूर सजावट काढण्यासाठी या प्रकरणाततुम्ही वर्ग किंवा अधिक विशिष्ट निवडक वापरावा:

Div span ( मजकूर-सजावट:अधोरेखित; ) मुख्य भाग (मजकूर-सजावट: काहीही;)

निवडकांना आता विशिष्टतेच्या बाबतीत समान वजन (0-0-0-2 = 0-0-0-2) आहे. दुसरा सिलेक्टर खाली वर्णन केल्याप्रमाणे पहिल्याची प्रॉपर्टी ओव्हरराइड करेल.

मला खात्री आहे की बहुतेक लेआउट डिझाइनर्सना निवडकर्त्यांच्या विशिष्टतेचे पहिले 2 नियम माहित आहेत आयडीआणि शैलीआणि हा लेख त्यांच्यासाठी काही नवीन नव्हता. परंतु उर्वरित दोन बद्दल विसरू नका, कारण हे लेआउट तयार करण्याची प्रक्रिया लक्षणीयरीत्या कमी करू शकते आणि त्रुटी ओळखण्यासाठी लागणारा वेळ वाढवू शकते.

मला एवढंच बोलायचं होतं. मला आशा आहे की तुम्हाला लेख मनोरंजक वाटला.

--
व्लादिस्लाव रेझर चॅप्युक, एप्रिल 2009

माझ्या कोणत्याही लेखाप्रमाणे, हा एक परिचयाने सुरू होतो. बोलू नये म्हणून विविध भाषा, CSS च्या जगात अगदी मूलभूत गोष्टींपासून सुरुवात करूया, म्हणजे, शब्दावलीसह. मला विद्यापीठातील शिक्षकासारखे वाटते - ते किती मस्त आहे.

CSS यशस्वीपणे समजून घेण्यासाठी आणि या क्षेत्रातील एक उत्कृष्ट विशेषज्ञ बनण्यासाठी, तुम्हाला प्रथम निवडकर्ता काय म्हणतात हे समजून घेणे आवश्यक आहे. खालील चित्र दाखवते सर्वात सोपी रचना CSS नियम.

निवडकर्ता- ही एक स्ट्रिंग आहे जी संरचनेचे औपचारिक वर्णन दर्शवते, ज्याच्या आधारावर दस्तऐवजाच्या झाडातील घटक किंवा घटकांचा समूह निवडला जातो आणि गुणधर्मांचा घोषित ब्लॉक लागू केला जातो.

निवडकांचे वेगवेगळे प्रकार आहेत. साधे निवडक आहेत, जसे की ज्यात एक अक्षर किंवा एक शब्द असतो आणि जटिल असतात, मोठ्या प्रमाणातशब्द आणि विविध वाक्यरचना रचना.

निवडकर्त्यांना अक्षर आणि इतर काही वर्णांनी सुरुवात करावी लागेल याबद्दल मी तपशीलात जाणार नाही. मी या विषयावरील कोणत्याही लेखात आढळू शकणाऱ्या रसहीन सत्याबद्दल देखील बोलणार नाही CSS मूलभूत. हा लेख CSS निवडकांच्या वजनाबद्दल आणि जर आपण बोललो तर याबद्दल चर्चा करेल सोप्या भाषेत- त्याचे संख्यात्मक प्रतिनिधित्व आणि समज याबद्दल.

निवडक वजन

नाही, आम्ही त्यांच्या वास्तविक वजनाबद्दल बोलत नाही (तेथे काहीही नाही) किंवा वर्णांच्या संख्येबद्दल नाही. असे वजन तराजूने मोजले जाऊ शकत नाही, कारण ते सामान्य अर्थाने भौतिक नाही आणि आपल्या लोकांच्या जगात अजिबात अस्तित्वात नाही. पण ते शून्य आणि एकाच्या स्वरूपात अस्तित्वात आहे. असे दिसून आले की निवडकर्त्याचे वजन विशिष्ट प्रणाली वापरून केले जाऊ शकते, ज्याबद्दल आम्ही पुढे बोलू.

निवडक वजन काय आहे?

निवडकर्त्याचे वजन हे सशर्त चार पोझिशन्स x, x, x, x आहेत, जे सिलेक्टरच्या सामग्रीनुसार शून्य आणि एकाने भरलेले आहेत. प्रत्येक स्थानाची स्वतःची सामग्री असते:

• इनलाइन शैली
• अभिज्ञापक
• वर्ग, विशेषता आणि छद्म-वर्ग
• टॅग आणि स्यूडो-घटक

हे कसे वाचायचे?

अगदी साधे. उजवीकडून डावीकडे. सर्वोच्च रँकची संख्या डावीकडे आहे, म्हणून त्यांचे वजन उजवीकडे आहे, उलटपक्षी; सर्वात हलके वजन. हे सर्व नंतर स्पष्ट होईल, म्हणून तुम्हाला या परिच्छेदाच्या अर्थाबद्दल विचार करण्याची गरज नाही.

ते कसे भरायचे?

H1 (रंग: #777;)

या उदाहरणात, निवडकर्ता हे h1 हेडिंग आहे, ज्यामध्ये एकच टॅग आहे. असे दिसून आले की "टॅग" स्तंभाच्या विरुद्ध आम्ही एक ठेवतो. परिणाम खालील चित्र आहे: 0, 0, 0, 1.

हे सर्व आश्चर्यकारक आहे, परंतु वास्तविक प्रकल्पकेवळ शैली किंवा सामान्यीकरणाच्या कोरमध्ये आढळते, याचा अर्थ असा की कार्य जटिल असणे आवश्यक आहे.

#main .container article.post > शीर्षलेख h1.giga ( रंग: #777; )

उदाहरण मागील आणि मध्ये पेक्षा अधिक हार्डकोर असल्याचे बाहेर वळले वास्तविक जीवन"सर्वात रिडंडंट सिलेक्टर" पुरस्कारासाठी पात्र. अशा अनावश्यकतेवर कायद्याने कारवाई केली पाहिजे, परंतु आम्ही लेखाच्या वेगळ्या भागात या विषयाबद्दल अधिक बोलू. ठीक आहे, चला उदाहरणाकडे परत जाऊ आणि स्केलसह थोडे कार्य करूया.

चला डावीकडून सुरुवात करू, कारण सुरवातीला एकच ओळखकर्ता #main आहे. पुढे आपण तीन classes.container, .post आणि .giga तसेच तीन टॅग लेख, शीर्षलेख आणि h1 पाहतो. आणखी स्पष्टतेसाठी, मी हे टप्प्यांच्या स्वरूपात लिहीन:

// सिलेक्टर #main .container article.post > header h1.giga // प्रारंभिक वजन 0, 0, 0, 0 // अभिज्ञापक #main 0, 1, 0, 0 // वर्ग, विशेषता आणि स्यूडो-क्लासेस. कंटेनर 0 , 1 , 1, 0 .पोस्ट 0, 1, 2, 0 .giga 0, 1, 3, 0 // टॅग आणि स्यूडो-घटक लेख 0, 1, 3, 1 शीर्षलेख 0, 1, 3, 2 h1 0, 1, 3, 3 // सारांश #main .container article.post > शीर्षलेख h1.giga => 0, 1, 3, 3

चला काही वेडे निवडक लिहू जे मला आशा आहे की मला कोणाच्याही कोडमध्ये दिसणार नाही:

// Selector body.page-post #main .container article.post ul.list-unstyled > li:first-child h2.article-title:hover ( color: #333; ) // प्रारंभिक वजन 0, 0, 0, 0 // आयडेंटिफायर्स #main 0, 1, 0, 0 // वर्ग, विशेषता आणि स्यूडो-क्लासेस.पेज-पोस्ट 0, 1, 1, 0 .कंटेनर 0, 1, 2, 0 .पोस्ट 0, 1, 3, 0 सूची-अनस्टाइल 0, 1, 4, 0:प्रथम-मुल 0, 1, 5, 0 .लेख-शीर्षक 0, 1, 6, 0:होवर 0, 1, 7, 0 // टॅग आणि स्यूडो-एलिमेंट्स मुख्य भाग 0, 1, 7, 1 लेख 0, 1, 7, 2 ul 0, 1, 7, 3 li 0, 1, 7, 4 h2 0, 1, 7, 5 // सारांश body.page-posts #main .कंटेनर लेख पोस्ट ul.list-unstyled > li:first-child h2.article-title:hover => 0, 1, 7, 5.

आणि शेवटी, विषयाच्या संपूर्ण आकलनासाठी, विशेषता आणि स्यूडो-घटकांसह एक उदाहरण असेल.

// Selector.main:पूर्वी ( सामग्री: "3 .column.size-1of3"; ) // प्रारंभिक वजन 0, 0, 0, 0 // अभिज्ञापक 0, 0, 0, 0 // वर्ग, विशेषता आणि स्यूडो- वर्ग मुख्य 0, 0, 1, 0 0, 0, 2, 0 // टॅग आणि स्यूडो-घटक: 0, 0, 2, 1 // मुख्य सारांश: आधी => 0, 0, 2, 1.

गोष्टी अशाच असतात.

खरं तर, हा विषय अतिशय सोपा आहे, परंतु पृष्ठावरील विशिष्ट घटकावर कोणता जाहिरात ब्लॉक लागू करायचा हे ब्राउझर कसे ठरवते हे सामान्य (किमान) समजून घेण्यासाठी व्यवहारात खूप महत्वाचे आहे.

निवडकर्त्यांचे वजन समान असेल तर?

समजा तुमच्याकडे दोन किंवा अधिक निवडक आहेत जे कोणत्या तरी समान घटकाकडे निर्देश करतात. आणि असे झाले की आपण मोजले किंवा फक्त त्यांच्याकडे पाहिले आणि वजन समान असल्याचे दिसून आले. निराश होऊ नका, या गटातील तुमच्या CSS कोडमधील फक्त शेवटचा निवडकर्ता घोषणा ब्लॉक घटकावर लागू केला जाईल. असं काहीसं. हे मला तार्किक वाटते. "ज्यांच्याकडे वेळ नव्हता त्यांना उशीर झाला" या म्हणीप्रमाणे, परंतु त्याउलट: "ज्यांना उशीर झाला ते वेळेवर आले."

हे का आवश्यक आहे?

हे खूप आहे मनोरंजक मुद्दा, कारण निवडकर्त्याचे वजन मोजल्याशिवाय घटकावर कोणता डिक्लेरेशन ब्लॉक लागू केला जाईल हे तुम्ही समजू शकता, म्हणजे फक्त ते पाहून आणि थोडा विचार करून. तथापि, डोळा निकामी होऊ शकतो, परंतु मशीन निकामी होणार नाही, ते वजन मोजेल आणि लेआउट खराब करेल. त्रुटी, अर्थातच, मशीनची नाही, परंतु संगणक आणि खुर्चीमधील थर आहे, परंतु ही एक पूर्णपणे वेगळी कथा आहे.

या प्रकारच्या गणनेचा दुसरा अनुप्रयोग म्हणजे सेवा किंवा स्क्रिप्ट ज्या CSS विशिष्टता आकृती तयार करतात. तुमच्या कोडच्या रिडंडंसीचे विश्लेषण आणि मूल्यांकन करण्यासाठी हे खूप उपयुक्त ठरू शकते.

एक मनोरंजक वस्तुस्थिती अशी आहे की मला निवडकर्त्याचे वजन मोजण्याची एकच वेळ Mail.ru कडून काही प्रकारच्या प्रमाणपत्रासाठी चाचणी होती. तुम्हाला स्वारस्य असल्यास, मी माझ्या इतिहासात ही चाचणी पाहीन.

अरे, माझ्याकडे विशेषत: तुमच्यासाठी एक सेवा आहे जी ही सामग्री सादर करण्याची तयारी करत असताना मला आढळली: विशिष्टता कॅल्क्युलेटर हे एक साधे आणि प्रभावी निवडक वजन कॅल्क्युलेटर आहे.

निवडक विशिष्टता

आम्ही CSS निवडकांच्या वजनाबद्दल बोलत असल्याने, आपण त्याचे मूल्यमापन कसे करावे याबद्दल अपरिहार्यपणे विचार करा: जेव्हा त्याला वजन कमी करण्याची आवश्यकता असते आणि जेव्हा, त्याउलट, वजन वाढवणे आवश्यक असते. माणसांप्रमाणेच, निवडकर्त्यांचे अजूनही इष्टतम वजन असते.

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

ठीक आहे, हे सर्व छान आहे, परंतु वजनाचा त्याच्याशी काय संबंध आहे? - होय, हे अगदी सोपे आहे, ते थेट त्यावर अवलंबून आहे. जितकी जास्त गुंतवणूक तितके वजन जास्त. हे तार्किक आहे, तरी.

तुम्ही CSS विशिष्टता आलेख जनरेटर संसाधन वापरून तुमच्या CSS कोडचे मूल्यांकन करू शकता. तुम्ही सुचवलेल्या CSS कोडवर आधारित, तो तयार केला आहे परस्परसंवादी चार्टतुमच्या कोडची विशिष्टता, ज्यावर तुम्ही तुमच्या शैलीतील समस्या क्षेत्रे दृष्यदृष्ट्या ओळखू शकता.

निष्कर्ष

इष्टतम निवडक वजन राखण्याचा प्रयत्न करा आणि अधूनमधून तुमचा कोड रिफॅक्टर करा. सुरुवातीला ते अनावश्यक आणि अनावश्यक वाटते, परंतु शेवटी ते तुमच्यावर वाईट विनोद करू शकते.

CSS चा संक्षेप म्हणजे कॅस्केडिंग स्टाइल शीट्स ( कॅस्केडिंग टेबलशैली), जिथे कीवर्डपैकी एक "कॅस्केड" आहे. या प्रकरणात, कॅस्केड म्हणजे दस्तऐवज घटकांसाठी भिन्न शैली नियमांचा एकाचवेळी वापर - अनेक शैली फायली कनेक्ट करून, गुणधर्म आणि इतर पद्धतींचा वारसा मिळवून. ला तत्सम परिस्थितीशेवटी कोणता नियम घटकाला लागू करायचा हे ब्राउझरला समजले आणि वर्तनात कोणतेही मतभेद नव्हते भिन्न ब्राउझर, काही प्राधान्यक्रम सुरू केले आहेत.

शैली नियमांवर प्रक्रिया करताना ब्राउझर वापरत असलेले प्राधान्यक्रम खाली दिले आहेत. सूचीमध्ये आयटम जितका जास्त असेल तितका तिचा प्राधान्यक्रम कमी असेल आणि उलट.

1. ब्राउझर शैली.
2. लेखकाची शैली.
3. वापरकर्ता शैली.
4. !महत्वाच्या व्यतिरिक्त लेखकाची शैली.
5. च्या जोडणीसह वापरकर्ता शैली!महत्वाचे.

सर्वात कमी प्राधान्य म्हणजे ब्राउझर शैली - डिफॉल्टनुसार ब्राउझर वेब पृष्ठ घटकांवर लागू केलेले डिझाइन. हे डिझाइन "बेअर" HTML च्या बाबतीत पाहिले जाऊ शकते, जेव्हा दस्तऐवजात कोणत्याही शैली जोडल्या जात नाहीत.

सानुकूल शैली कशी सेट करावी याचे वर्णन केले आहे (चित्र 1.3 आणि 1.4 पहा).

!महत्त्वाचे

!महत्वाचा कीवर्ड जेव्हा वापरकर्ते त्यांच्या स्वतःच्या स्टाईलशीटचा समावेश करतात तेव्हा लागू होतो. पृष्ठ लेखकाची शैली आणि समान घटकासाठी वापरकर्ता यांची शैली जुळत नसल्यास विरोध असेल, तर !महत्त्वपूर्ण म्हणून तुम्हाला स्टाइलची प्राथमिकता किंवा दुसऱ्या शब्दात तिचे महत्त्व वाढवण्याची अनुमती देते.

सानुकूल शैली पत्रक किंवा दोन्ही वापरताना विविध शैलीलेखक आणि वापरकर्ता समान निवडक, ब्राउझर खालील अल्गोरिदमद्वारे मार्गदर्शन केले जाते.

• !महत्त्वाचे लेखकाच्या शैलीमध्ये जोडले आहे - लेखकाची शैली लागू केली जाईल.
• !महत्त्वाचे वापरकर्ता शैलीमध्ये जोडले आहे - वापरकर्ता शैली लागू केली जाईल.
• !महत्त्वाचे लेखकाची शैली आणि वापरकर्त्याची शैली या दोन्हीमध्ये उपस्थित नाही - वापरकर्त्याची शैली लागू केली जाईल.
• !महत्त्वाचे लेखकाच्या शैलीमध्ये आणि वापरकर्त्याच्या शैलीमध्ये समाविष्ट आहे - वापरकर्त्याची शैली लागू केली जाईल.

वापरण्यासाठी वाक्यरचना !महत्वाचे खालीलप्रमाणे आहे.

मालमत्ता: मूल्य! महत्त्वाचे

तुम्हाला काय हवे ते आधी लिहा शैली मालमत्ता, नंतर त्याचे मूल्य कोलन नंतर आणि शेवटी स्पेस नंतर सूचित केले जाते कीवर्ड!महत्त्वाचे.

महत्त्व वाढवणे केवळ लेखक आणि वापरकर्ता शैली पत्रक यांच्यातील अग्रक्रमाचे नियमन करण्यासाठी नव्हे तर विशिष्ट निवडकर्त्याची विशिष्टता वाढविण्यासाठी देखील आवश्यक आहे.

विशिष्टता

विरोधाभासी शैलीचे नियम एकाच घटकावर एकाच वेळी लागू केले असल्यास, उच्च निवडकर्ता विशिष्टता मूल्यासह नियमाला प्राधान्य दिले जाते. विशिष्टता हे मोजले जाणारे विशिष्ट सशर्त मूल्य आहे खालीलप्रमाणे. प्रत्येक आयडेंटिफायरसाठी (आम्ही त्यांची संख्या a द्वारे दर्शवू) 100 दिले जाते, प्रत्येक वर्गासाठी आणि स्यूडो-क्लास (b) 10 दिले जाते, प्रत्येक टॅग निवडकर्त्यासाठी आणि स्यूडो-एलिमेंट (c) 1 जोडले जाते निर्दिष्ट मूल्येएका विशिष्ट क्रमाने, आम्हाला या निवडकर्त्यासाठी विशिष्टता मूल्य मिळते.

* () /* a=0 b=0 c=0 -> विशिष्टता = 0 */ li () /* a=0 b=0 c=1 -> विशिष्टता = 1 */ li:first-line () / * a=0 b=0 c=2 -> विशिष्टता = 2 */ ul li () /* a=0 b=0 c=2 -> विशिष्टता = 2 */ ul ol+li () /* a=0 b=0 c=3 -> विशिष्टता = 3 */ ul li.red () /* a=0 b=1 c=2 -> विशिष्टता = 12 */ li.red.level () /* a=0 b =2 c=1 -> विशिष्टता = 21 */ #t34 () /* a=1 b=0 c=0 -> विशिष्टता = 100 */ #content #wrap () /* a=2 b=0 c= 0 -> विशिष्टता = 200 */

द्वारे टॅगमध्ये इनलाइन शैली जोडली शैली गुणधर्म, ची विशिष्टता 1000 आहे, त्यामुळे ती नेहमी संबंधित आणि जागतिक शैलींना ओव्हरराइड करते. तथापि, जोडणे !महत्त्वाचे इनलाइन शैली देखील अधिलिखित करते.

दोन निवडकांची विशिष्टता समान असल्यास, खालील कोडमध्ये दर्शविलेली शैली लागू केली जाईल.

उदाहरण 19.1 हे दर्शविते की विशिष्टता सूची आयटमच्या शैलीवर कसा परिणाम करते.

उदाहरण 19.1. सूचीचा रंग

HTML5 CSS 2.1 IE Cr Op Sa Fx

IN या उदाहरणातयादीतील मजकूराचा रंग हिरवा वर सेट केला आहे, आणि दुसरी सूची आयटम दोन वर्ग वापरून लाल रंगात हायलाइट केला आहे. आम्ही #menu ul li सिलेक्टरच्या विशिष्टतेची गणना करतो - एक आयडेंटिफायर (100) आणि दोन टॅग (2) 102 च्या मूल्यापर्यंत जोडतात आणि .दो सिलेक्टरमध्ये 10 चे विशिष्टता मूल्य असेल, जे स्पष्टपणे कमी आहे. त्यामुळे मजकूर लाल रंगात रंगणार नाही. परिस्थिती सुधारण्यासाठी, तुम्ही एकतर पहिल्या निवडकर्त्याची विशिष्टता कमी केली पाहिजे किंवा दुसऱ्याची विशिष्टता वाढवली पाहिजे (उदाहरण 19.2).

उदाहरण 19.2. बदलण्याची विशिष्टता

/* पहिल्या निवडकर्त्याची विशिष्टता कमी करा */ ul li (...) /* अभिज्ञापक काढा */ .two (...) /* दुसऱ्या निवडकर्त्याची विशिष्टता वाढवा */ # menu ul li (.. .) #menu .दोन (...) /* एक अभिज्ञापक जोडा */ #menu ul li (...) .two (रंग: लाल !महत्त्वाचे; ) /* जोडा!महत्वाचे */

आयडेंटिफायर जोडणे केवळ निवडकर्त्याची विशिष्टता बदलण्यासाठीच नाही तर केवळ निर्दिष्ट सूचीमध्ये शैली लागू करण्यासाठी देखील वापरले जाते. म्हणून, अभिज्ञापक काढून विशिष्टता कमी करणे क्वचितच वापरले जाते, इच्छित निवडकर्त्याची विशिष्टता वाढविली जाते;

तपासण्यासाठी प्रश्न

1. table.forum tr:hover p सिलेक्टरमध्ये कोणती विशिष्टता असेल?

2. #catalog .col3 .height div सिलेक्टरमध्ये कोणती विशिष्टता असेल?

प्रश्न योग्य समजमुदत CSS विशिष्टता आणि वेब डेव्हलपमेंटमध्ये त्याची भूमिका अनेकदा काही आव्हानांसह येते. या विषयाकडे जाण्याचा सर्वोत्तम मार्ग म्हणजे CSS विशिष्टता दर्शवणारे उदाहरण पाहणे जटिल फॉर्मआणि कदाचित तुमच्या गृहितकांचा विरोधाभास आहे. हा लेख CSS निवडकांच्या वास्तविक विशिष्टतेच्या मूल्याची गणना करण्यासाठी आणि त्यांचे प्राधान्य निश्चित करण्यासाठी तत्त्वे समजून घेण्यासाठी अशा पद्धतीचा वापर करतो.

उदाहरण म्हणून, तीन प्रकारच्या पेयांचे प्रतिनिधित्व करणारी नियमित अक्रमित यादी घेऊ:

• व्हिस्की


• बिअर


• कोला

आता, असे म्हणूया की आम्हाला सर्वात जास्त पसंत असलेले पेय दृष्यदृष्ट्या हायलाइट करायचे आहे. हे करण्यासाठी, आपल्याला योग्य साधन प्रदान करणे आवश्यक आहे - आवश्यक सूची घटकासाठी वर्गाचे नाव निर्दिष्ट करा:

• व्हिस्की


• बिअर


• कोला

आवडते (
रंग: ऑलिव्ह;
फॉन्ट-वजन: ठळक;
}

या कोडचा परिणाम पाहणे एवढेच उरले आहे. परंतु, आम्हाला अपेक्षित परिणाम मिळाला नाही - आम्ही निवडलेल्या पेयाचा मजकूर (व्हिस्की) ठळक केला जाणार नाही आणि उर्वरित सूची घटकांप्रमाणेच प्रदर्शित केला जाणार नाही. काय प्रकरण आहे?

समस्येचे संभाव्य कारण समान CSS दस्तऐवजात परिभाषित केलेला दुसरा नियम असू शकतो, जो यासारखा दिसतो:

ul#drinksli (
रंग: काळा;
फॉन्ट-वजन: सामान्य;
फॉन्ट-आकार: 13px;
}

हा CSS नियम आहे ज्यामध्ये व्याख्या आहेत ज्या इच्छित सूची घटक दृश्यमानपणे हायलाइट होण्यापासून प्रतिबंधित करतात. तुम्ही वापरत असलेल्या दस्तऐवजात एकाच घटकावर लागू केलेले दोन भिन्न CSS निवडक आहेत ( आवडते आणि ul#drinks li), जे त्यात समाविष्ट असलेल्या मजकुराच्या रंग आणि फॉन्ट वजनासाठी भिन्न मूल्ये प्रदान करतात. फॉन्ट आकारासाठी, येथे सर्वकाही स्पष्ट आहे - प्रश्नातील कोडमध्ये फक्त एक अभिव्यक्ती आहे जी त्याचे मूल्य निर्धारित करते (फॉन्ट-आकार: 13px), म्हणून ते वापरले जाईल. या प्रकरणात, अडचण अशी आहे की दस्तऐवजावर प्रक्रिया करताना कोणत्या परस्परविरोधी नियमांना प्राधान्य द्यायचे हे ब्राउझरने निश्चित केले पाहिजे. प्रत्येक नियमासाठी CSS विशिष्टता मूल्ये या उद्देशांसाठी अचूकपणे अभिप्रेत आहेत.

बहुतेक समस्या नवशिक्या वेब डेव्हलपर्सकडून उद्भवतात ज्यांना तत्त्व समजत नाही ज्याद्वारे कार्य नियम निवडला जातो. ते सहसा असे गृहीत धरतात की .favorite सिलेक्टरला प्राधान्य दिले पाहिजे कारण ते CSS कोड स्ट्रक्चरमध्ये कमी आहे किंवा मधील class="favorite" विशेषता व्याख्या HTML मार्कअपदस्तऐवज आम्हाला स्वारस्य असलेल्या पृष्ठ घटकाच्या मजकूर सामग्रीच्या जवळ आहे (

* घोषणेची सर्वसमावेशक माहिती! महत्वाचे वाचता येते.

*अनुवादकाची टीप.

तर, तुम्हाला आधीच माहित आहे की जेव्हा एकाच घटकावर अनेक विरोधाभासी नियम एकाच वेळी लागू केले जातात, तेव्हा त्यांच्यामध्ये स्पर्धा होते - ते त्यांची तुलना करतात. वैशिष्ट्ये. सर्वात विशिष्टतेसह नियम जिंकतो.

अर्थात, अर्जाचा निकाल तुमच्यासाठी अंदाज लावता येण्यासाठी, तुम्हाला कोणते नियम प्रचलित असतील हे पाहणे आवश्यक आहे. विशिष्टता कशी मोजली जाते हे शोधण्याची वेळ आली आहे.

ते कसे दिसते

विशिष्टता म्हणजे चार संख्यांचा समूह. उदाहरणार्थ, ०,०,०,० किंवा ०,०,१,२.

विशिष्टतेची गणना कशी करावी

निवडकर्त्याद्वारे विशिष्टता मोजली जाते. मोजणीचे नियम खूप सोपे आहेत:

• निवडकर्त्यामध्ये उपस्थित असलेला प्रत्येक अभिज्ञापक विशिष्टतेमध्ये 0,1,0,0 जोडतो;
• प्रत्येक वर्ग, स्यूडो-क्लास किंवा विशेषता विशिष्टतेमध्ये 0,0,1,0 जोडते;
• प्रत्येक घटक किंवा छद्म-घटक विशिष्टतेमध्ये 0,0,0,1 जोडतो;
• सार्वत्रिक निवडकर्ताआणि कॉम्बिनेटर विचारात घेतले जात नाहीत.

आपण जे शिकलो ते एकत्र करूया आणि विशिष्टतेची गणना करण्याचा सराव करूया.

P (/*some व्याख्या */) div p (/*some definition*/) p.note (/*some definition*/) form.feedbackफॉर्म इनपुट (/*some व्याख्या */) #conten a:hover (/* काही व्याख्या */)

पहिली ओळ सिंगल टाईप सिलेक्टर आहे. विशिष्टता 0,0,0,1.

दुसरी ओळ दोन प्रकारचे निवडक आहे. विशिष्टता 0,0,0,2.

तिसरी ओळ एक प्रकार आणि वर्ग निवडक आहे. विशिष्टता 0,0,1,1.

चौथी ओळ दोन प्रकारचे निवडक आहे, एक वर्ग आणि एक विशेषता. विशिष्टता 0,0,2,2.

पाचवी ओळ म्हणजे आयडेंटिफायर, टाइप आणि स्यूडो-क्लास सिलेक्टर. विशिष्टता 0,1,1,1.

कोण जिंकले?

वैशिष्ट्यांची तुलना करणे खूप सोपे आहे. जी संख्या मोठी असेल, व्याख्या जिंकते.

उदाहरणार्थ:
0,0,1,4 हे 0,0,1,2 पेक्षा मोठे आहे.
0,1,2,0 हे 0,0,2,1 पेक्षा मोठे आहे.

लक्षात ठेवा की प्रथम (त्या डावीकडील) संख्या नेहमी नंतरच्या (अधिक उजवीकडे) संख्यांवर विजय मिळवतील. ते अधिक वरिष्ठ श्रेणीतील असल्याचे दिसते.

उदाहरणार्थ, ०,१,०,० हे ०,०,८,९ पेक्षा मोठे आहे.

हे तुमच्यासाठी अधिक सोयीचे असल्यास, तुम्ही मानसिकदृष्ट्या स्वल्पविराम टाकून देऊ शकता आणि मागील उदाहरण 100>89 म्हणून विचारात घेऊ शकता. काही विशिष्टता अंक नऊ पेक्षा जास्त असल्यास गोंधळून जाऊ नका (जे अतिशय अत्याधुनिक निवडकर्त्यासह होऊ शकते). उदाहरणार्थ, विशिष्टता 0,1,10,14 असल्यास, स्वल्पविराम टाकून दिला जाऊ शकत नाही, अन्यथा सर्व अंक गोंधळून जातील.

विशिष्टता आणि घोषणा

विशिष्टता संपूर्ण नियमाला लागू होत नाही, परंतु प्रत्येक विशिष्ट जाहिरातीला लागू होते. म्हणूनच, असे होऊ शकते की नियम पूर्णपणे "कार्य करत नाही". उदाहरणार्थ:

Div ( रंग: #0f0; /* विशिष्टता 0,0,0,1. */ फॉन्ट-वजन: ठळक; /* विशिष्टता 0,0,0,1. */ ) .बॉक्स ( फॉन्ट-वजन: सामान्य; / * विशिष्टता ०,०,१,० */ )

घटकासाठी ओळ 2 वरून घोषणा