आईडी में अवधि के साथ सीएसएस चयनकर्ता

Question

HTML युक्ति एक आईडी में अवधि (।) के लिए अनुमति देता है:

<img id="some.id" />

हालाँकि, CSS ID चयनकर्ता नियम का उपयोग करना सही ढंग से मेल नहीं खाएगा:

#some.id { color: #f00; }

आईडी चयनकर्ताओं के लिए सीएसएस कल्पना इस मामले का उल्लेख नहीं करती है। तो मुझे लगता है कि यह एक टैग नाम और वर्ग चयनकर्ता के संयोजन का उपयोग कर रहा है ? उदाहरण के लिए, का एक एसीसी नियम a.classNameसभी एंकर टैग ( <a>) के वर्ग नाम के साथ लागू होगा className, जैसे <a class="className"></a>।

क्या एक बाहरी सीएसएस फ़ाइल नियम होना संभव है जो एक HTML तत्व को अपनी आईडी द्वारा संदर्भित करता है जिसमें इसकी अवधि होती है?

मुझे उम्मीद नहीं है कि चूंकि सीएसएस कल्पना निर्दिष्ट करती है कि सीएसएस " पहचानकर्ता " अवधि को एक वैध चरित्र के रूप में शामिल नहीं करता है। तो क्या यह HTML और CSS स्पेक्स के बीच एक मूलभूत बेमेल है? क्या सीएसएस चयन का एक अलग प्रकार का उपयोग करने के लिए मेरा एकमात्र विकल्प है? किसी को भी मैं इस बात की पुष्टि या इनकार कर सकता हूँ?

(मैं चीजों को सरल बनाने के लिए HTML आईडी विशेषता से अवधि निकालूंगा, लेकिन यह एक सिस्टम-जनरेट आईडी है, इसलिए मेरे पास इस मामले में इसे बदलने की क्षमता नहीं है।)

Comments

आप कह सकते हैं कि यह HTML और CSS के बीच एक बेसिक बेमेल है। हालाँकि, चूंकि वे दो अलग-अलग भाषाएँ हैं, इसलिए यह अपेक्षित नहीं है कि वे मेल खाते हों; एक HTML पहचानकर्ता एक HTML पहचानकर्ता है जबकि एक CSS पहचानकर्ता एक CSS पहचानकर्ता है। इसके अलावा, सीएसएस अन्य भाषाओं को भी स्टाइल कर सकता है, न केवल HTML (हालांकि दी गई, सीएसएस शुरुआत में HTML के लिए बनाई गई थी)।

— बोल्टलॉक

#some.idआईडी और क्लास चयनकर्ता के संयोजन का भी उपयोग कर रहा है।

— बोल्टलॉक

क्या आईडी एकमात्र विशेषता है जो आपके पास स्टाइल हुक के रूप में है? मुझे पता है कि यह थोड़ा ऑफ-टॉपिक है, लेकिन मैं सोच रहा हूं कि आप img या क्लास (यदि उपलब्ध हो) के बजाय आईडी का उपयोग क्यों करना चाहते हैं।

— Jayx

@Jayx RE "क्यों img (टैग) या एक वर्ग के बजाय एक आईडी का उपयोग करें?" यह बहुत सारे कारणों और स्थितियों के लिए भिन्न होता है। लेकिन इस मामले में, एक विशिष्ट तत्व को स्टाइल की आवश्यकता थी, पृष्ठ पर सभी छवियां नहीं। यदि HTML संशोधित किया जा सकता है, तो एक वर्ग का उपयोग किया जा सकता था, लेकिन इस मामले में इसे संशोधित नहीं किया जा सकता था क्योंकि यह हमारे नियंत्रण से परे एक प्रणाली द्वारा उत्पन्न किया गया था।

— जॉन एडम्स

Answer 1

क्लासिक। सवाल लिखने वाले सभी चश्मे के माध्यम से खुदाई करने के बाद, मैंने इसके माध्यम से कुछ और पढ़ा और पाया कि एक भागने चरित्र है। मुझे पहले कभी इसकी आवश्यकता नहीं थी, लेकिन सीएसएस युक्ति बैकस्लैश (\) को अधिकांश भाषाओं की तरह भागने की अनुमति देता है । तुम क्या जानते हो?

इसलिए मेरे उदाहरण में, निम्नलिखित नियम मेल खाते हैं:

#some\.id { color: #f00; }

Comments

अच्छा शोध कार्य। इस तरह अधिक क्यू एंड ए होना चाहिए, जैसे कोई my मेरे बजाय अपना कोड नहीं लिखता है ”।

— पावलो सेप

अच्छा शोध। मैं अभी एक बड़े उद्यम अनुप्रयोग में इस पर काम कर रहा था। मैं पूरी तरह से स्तब्ध था और इसे पहले कभी नहीं देखा था। इसमें एक अवधि के साथ एक आईडी बनाने की बात क्या है ??

— एंथनी

@Anthony: एचटीएमएल आईडी विशेषता में एक अवधि डालने का कोई विशेष कारण नहीं है। मुझे लगता है कि कभी-कभी लेखक बस चाहते हैं? हो सकता है कि कुछ मामलों में इसे अंतर्निहित कार्यान्वयन प्रणालियों से उड़ाया जा सकता है जो फॉर्म प्रसंस्करण के लिए सर्वर-साइड कोड के पहचानकर्ताओं में अवधि का उपयोग कर सकते हैं? मुझे यकीन है कि हर किसी के पास अपने कारण हैं; लेकिन उन्हें शामिल करने का कोई HTML / CSS कारण नहीं है।

— जॉन एडम्स

धन्यवाद, मुझे OpenLayers से समस्या हो रही थी क्योंकि यह अपने id में डॉट्स का उपयोग करता है। उदाहरण के लिए: "OpenLayers.Control.Attribution_7"। मुझे लगता है कि यह आंतरिक कोड के साथ मदद करता है जहां उनके पास जावास्क्रिप्ट चर नाम हो सकता है वही आईडी के समान मूल्य है।

— हॉफमैन

मैं एक नया प्रश्न जोड़ने और अपना उत्तर लिखने पर विचार कर रहा था, लेकिन यहाँ केवल टिप्पणी करने का निर्णय लिया गया। यदि आप स्टाइलस प्रीप्रोसेसर का उपयोग कर रहे हैं, तो आपको #some\\.idविशेष चरित्र से बचने के लिए , दो बैकस्लैश का उपयोग करने की आवश्यकता है । पहले बैकस्लैश का उपयोग स्टाइलस द्वारा किया जाता है, शेष बैकस्लैश को संकलित सीएसएस में छोड़ दिया जाता है, जो इस उत्तर में वर्णित वांछित परिणाम प्राप्त करता है।

— मार्क

Answer 2

तुम भी img [आईडी = some.id] का उपयोग कर सकते हैं]

अधिक जानकारी यहाँ: http://www.w3.org/TR/selectors/#attribute-selectors

Comments

यह कुछ ब्राउज़रों में काम कर सकता है, लेकिन मैंने त्रुटियों को विशेषता चयनकर्ताओं के लिए भी देखा है। आप अभी भी बच सकते हैं ., जैसे \.कि।

— क्रिस जेनेस