क्यों .foo a: link, .foo a: विज़िट {} चयनकर्ता ओवरराइड करें: होवर, ए: सक्रिय {} सीएसएस में चयनकर्ता?

नमूना कोड: http://jsfiddle.net/RuQNP/क्यों .foo a: link, .foo a: विज़िट {} चयनकर्ता ओवरराइड करें: होवर, ए: सक्रिय {} सीएसएस में चयनकर्ता?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Foo</title> 
    <style type="text/css"> 
     a:link, a:visited { 
      color: blue; 
     } 

     a:hover, a:active { 
      color: red; 
     } 

     .foo a:link, .foo a:visited { 
      color: green; 
     } 

     /* A possible fix */ 
     /* 
     .foo a:hover, .foo a:active { 
      color: red; 
     } 
     */ 
    </style> 
</head> 
<body> 
    <div class="foo"> 
     <a href="http://example.com/">Example</a> 
    </div> 
</body> 
</html>

मैं क्या उम्मीद कर रहा था:

लिंक हॉवर पर लाल दिखाई देता है।

मुझे क्या मिलेगा:

लिंक हॉवर पर हरे रंग दिखाई देता है।

सवाल:

क्यों color.foo a:link, .foo a:visited चयनकर्ता में परिभाषित a:hover, a:active में एक ओवरराइड करता है? क्या चल रहा है?
मैं समझता हूं कि मैं इसे ठीक कर सकता हूं और टिप्पणी कोड को अपूर्ण करके मुझे उम्मीद कर सकता हूं। हालांकि, मैं जानना चाहता हूं कि हम .foo a:link, .foo a:visited चयनकर्ता को कैसे सही कर सकते हैं कि colora:hover, a:active में परिभाषित किया गया है?

अगर मैं http://www.w3.org/TR/CSS21/cascade.html#specificity ठीक से समझ (धन्यवाद, BoltClock), इस कोड में विभिन्न चयनकर्ताओं के लिए विशिष्टता तालिका है।

a:link   - 0 0 1 1 
a:visited  - 0 0 1 1 
a:hover  - 0 0 1 1 
a:active  - 0 0 1 1 
.foo a:link - 0 0 2 1 
.foo a:visited - 0 0 2 1

तो, शैली .foo a:link के लिए परिभाषित a:hover के लिए शैली को ओवरराइड करता है जब दोनों link रूप में अच्छी तरह hover के रूप में छद्म कक्षाएं एक वर्ग foo का एक तत्व के लिए लागू होते हैं।

इसी प्रकार, शैली .foo a:visited के लिए परिभाषित a:hover के लिए शैली को ओवरराइड करता है जब दोनों visited रूप में अच्छी तरह hover के रूप में छद्म कक्षाएं एक वर्ग foo का एक तत्व के लिए लागू होते हैं।

स्रोत

2011-09-10 Susam Pal

चयनकर्ता की * विशिष्टता * अवधारणा है, कि एक "अधिक विशिष्ट" जिसका अर्थ है है चयनकर्ता एक सामान्य सामान्य ट्रम्प करेगा (उदाहरण के लिए 'html a.foo'' foo' ट्रम्प करेगा)। Google इसे या एसओ पर यहां खोजें, ऐसे कई सारे प्रश्न हैं। – Jon

[सीएसएस: चयनकर्ता की प्राथमिकता/विशिष्टता को समझना] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/4072365/css-understanding-the- चयनकर्ता- प्राथमिकता - विशिष्टता) – Jon

हां, लेकिन अधिक विशिष्ट शैली लागू नहीं होती है एक के लिए: होवर, इस प्रकार सवाल। –

जब आप पहली बार सीएसएस के साथ शुरू किया, तो आप जिसमें लिंक चयनकर्ताओं (a:link, a:visited, a:hover, a:active) निर्दिष्ट करने के आदेश के लिए प्यार-नफरत स्मरक बारे में सीखा है हो सकता है। क्या आपने कभी सोचा है कि यह निमोनिक क्यों चुना गया था?

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

ध्यान दें कि ए: होवर को ए: लिंक और ए के बाद रखा जाना चाहिए: नियमों का दौरा किया जाना चाहिए, अन्यथा कैस्केडिंग नियम ए: होवर नियम की 'रंग' संपत्ति को छुपाएंगे। इसी तरह, ए: सक्रिय ए के बाद रखा जाता है: होवर, सक्रिय रंग (नींबू) तब लागू होगा जब उपयोगकर्ता ए तत्व पर सक्रिय और उत्थान करता है।

वैसे भी, जिस बिंदु पर मैं ऊपर बनाने की कोशिश कर रहा हूं वह यह है कि छद्म-वर्ग होने वाले सभी चार छद्म वर्गों में समान विशिष्टता है। विशिष्टता के बारे में सब कुछ लागू होता है।इस मामले में, समान विशिष्ट चयनकर्ताओं के समूह के बाहर, अंतिम नियम लागू होता है। प्रत्येक छद्म-वर्ग ट्रिगर होने पर या कब प्रासंगिक नहीं होता है।

अब, .foo चयनकर्ता की सरल परिचय लिंक के अपने दूसरे सेट/दौरा नियम, लिंक/दौरा शैलियों और मंडराना/सक्रिय शैलियों के अपने पहले सेट ओवरराइड करने के लिए हमेशा के लिए है कि वर्ग के साथ तत्वों में लिंक के लिए मजबूर कर का कारण बनता है जब तक आप .foo चयनकर्ता के साथ होवर/सक्रिय शैलियों को जोड़ते हैं तब तक हरे रंग में दिखाई दें।

^{क्षमा करता है, तो मेरा उत्तर सिले-अप या माध्यम से असावधानीपूर्ण लगता है, मैं इस मेरे iPhone पर अभी टाइप कर रहा हूँ और इसे यहाँ बाहर सोचने के लिए बहुत मुश्किल है ...}

स्रोत

2011-09-10 12:59:36 BoltClock

लेकिन मैंने पाया कि '.foo a: link, .foo a: 'a: hover से पहले' चयनकर्ता का चयन किया गया है, एक: सक्रिय 'चयनकर्ता समस्या को ठीक नहीं करता है। यहां एक उदाहरण दिया गया है: http://jsfiddle.net/eSc56/ यहां तक कि '.foo a: link, .foo a में निर्दिष्ट रंग: विज़िट किया गया' चयनकर्ता 'ए: होवर, ए: सक्रिय' में से एक को ओवरराइड करता है। –

@ सुसम पाल: कक्षा चयनकर्ता इसे अधिक विशिष्ट बनाता है, इसलिए जहां भी आप इसके साथ नियम डालते हैं, यह अभी भी अन्य सभी नियमों को ओवरराइड कर देगा। – BoltClock

तो, आपका मतलब है '.class .element: स्यूडोक्लास' ओवरराइड '.element: another -seseococass'? यदि ऐसा है, तो आउटपुट समझ में आता है। मैं यह जानने की कोशिश कर रहा हूं कि सीएसएस मानक में क्या मतलब है लेकिन मैं इसे अभी तक नहीं ढूंढ पाया। –

ठीक करने के लिए यह, .foo ... चयनकर्ता पहले डाल दिया और अन्य लिंक/दौरा चयनकर्ता के लिए रंग मूल्य को !important जोड़ने के लिए, इस तरह:

a:link, a:visited { 
     color: blue; 
    } 

    a:hover, a:active { 
     color: red !important; 
    } 
    .foo a:link, .foo a:visited { 
     color: green; 
    }

कारण यह है कि .foo a:link, .foo a:visited चयनकर्ता अन्य चयनकर्ता को ओवरराइड करता है कोई फर्क नहीं पड़ता कि आप कहां डालते हैं क्योंकि .foo a:linka:link से अधिक विशिष्ट है। (:visited के लिए ditto।) तो .foo ... चयनकर्ता हमेशा a:link,a:visited चयनकर्ता को ओवरराइड करेगा क्योंकि इसमें अभिभावक वर्ग का नाम है, इसलिए यह अधिक विशिष्ट है।
(लोव - हैटे के बारे में बोल्टक्लॉक के उत्तर को भी पढ़ें - यह समस्या का हिस्सा है।)

स्रोत

2011-09-10 13:17:27 Abraham

आपका समाधान काम नहीं करता है। –

@ सुसम: क्षमा करें। होवर/सक्रिय नियम के लिए रंग मान के बाद भी 'महत्वपूर्ण' जोड़ें। (डेमो: http: //jsfiddle.net/EdYPU/) – Abraham

'!महत्वपूर्ण 'को केवल एचए नियम में जाना है, एलवी नियम नहीं। अन्यथा .foo एलवी नियम के आसपास बहुत कुछ नहीं है :) – BoltClock

इस तरह मैं इसे समझता हूं। इन सभी छद्म वर्गों में समान विशिष्टता है, इसलिए छद्म वर्ग आखिरी जीत में लिखा गया है। अब छद्म-वर्ग :link, :visited, :focus, :hover, :active क्या करते हैं? आइए हम एक-एक करके देखते हैं।

a: link{color: red} उपयोगकर्ता एजेंट को किसी भी राज्य में एंकर तत्व लाल रंग देने के लिए कहता है।

a:link { 
 
    color: red; 
 
    
 
    }

<a href="www.stackoverflow.com">Go to stackoverflow </a>

एंकर तत्व निम्नलिखित राज्यों यदि और केवल यदि लिंक विज़िट नहीं किए गए है में लाल रंग का है,

विज़िट नहीं किए गए
hovered: निम्न स्क्रिप्ट चलाएँ
केंद्रित (टैब्ड)
सक्रिय (क्लिक किया)

तो, a: link{color: red} उपयोगकर्ता एजेंट बताता है ऊपर के सभी राज्यों को में तत्व एंकर करने के लिए लाल रंग देने के लिए। अब इसकी तुलना a:hover छद्म-वर्ग के साथ करें।निम्न स्क्रिप्ट

a:hover { 
 
    color: red; 
 
    
 
}

<a href="www.stackoverflow.com">Go to stackoverflow </a>

एंकर तत्व निम्नलिखित राज्यों में लाल रंग का है,

hovered
सक्रिय (क्लिक किया)

हम देखते हैं भागो किदोनों 210 और :hover छद्म वर्ग hover राज्य को परिभाषित करने में सक्षम हैं - इसलिए यदि आप इन दो छद्म वर्गों को किसी विशेष तत्व में असाइन करते हैं तो आखिरकार सीएसएस फ़ाइल में वर्णित एक व्यक्ति जीता है। यही कारण है कि हम कहते हैं कि :link:hover ओवरराइड करेगा जब पूर्व में बाद में उल्लेख किया गया है। एक ही अवधारणा अन्य छद्म वर्गों के लिए रखती है। मैं प्रत्येक छद्म वर्ग की क्या सूची की सूची देना चाहता हूं।

a:link {...} सेट एक विज़िट नहीं किए गए लिंक
के निम्नलिखित राज्यों - केंद्रित (टैब किए गए)
- hovered
- सक्रिय (क्लिक किया)

link राज्य हर दूसरे राज्य पर आ जाएगी।

a:visited {...} सेट एक का दौरा किया लिंक के निम्नलिखित राज्यों:
- केंद्रित (टैब किए गए)
- hovered
- सक्रिय (क्लिक किया)

a:visited {...} को छोड़कर हर दूसरे राज्य को पार कर जाएगी :linkअगर और केवल लिंक पर गया है।

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

a:focus {...} सेट दोनों का दौरा किया और विज़िट नहीं किए गए लिंक के लिए निम्नलिखित राज्यों:
- केंद्रित (टैब किए गए)
- hovered
- सक्रिय (क्लिक किया)

a:focus {...} ओवरराइड :hover और :active राज्यों।

a:hover {...} सेट दोनों का दौरा किया और विज़िट नहीं किए गए लिंक को निम्नलिखित राज्यों:
- hovered
- सक्रिय (क्लिक किया)

a:hover {...} ओवरराइड :active राज्य

a:active {...} सेट दोनों का दौरा किया और विज़िट नहीं किए गए लिंक के लिए निम्नलिखित राज्यों:

सक्रिय (क्लिक किया)

स्रोत

2016-03-04 15:05:49 user31782

स्टाइल शीट में 'ए' टैग से संबंधित छद्म वर्गों के उचित क्रम को याद रखने के लिए संघर्ष करने वालों के लिए - ** एल ** ओ ** वी ** पहले ** एच ** ते। 'लिंक' -> 'देखा गया' -> 'होवर' ->' सक्रिय ' – RBT

क्यों .foo a: link, .foo a: विज़िट {} चयनकर्ता ओवरराइड करें: होवर, ए: सक्रिय {} सीएसएस में चयनकर्ता?

उत्तर

संबंधित मुद्दे