CSS विशेषता चयनकर्ता एक href काम नहीं करता है

Question

मुझे अलग-अलग रंग और छवि पर लिंक बदलने के लिए सीएसएस में विशेषता चयनकर्ता का उपयोग करने की आवश्यकता है, लेकिन यह काम नहीं करता है।

मेरे पास यह html है:

<a href="/manual.pdf">A PDF File</a>

और यह सीएसएस:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

पृष्ठभूमि लाल क्यों नहीं है?

Comments

+1 क्योंकि मुझे एक [विशेषता = '

— गुणनाम

@SpaceBeers, वह है element[attribute_name="attribute_value"]।

— JMM

Answer 1

$ का उपयोग अपने href के बाद करें। यह स्ट्रिंग के अंत से मेल खाने के लिए विशेषता मान बनाएगा।

a[href$='.pdf'] { /*css*/ }

JSFiddle: http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

स्रोत: http://www.w3.org/TR/selectors/

Comments

स्ट्रिंग के अंत से मिलान करने के लिए मूल्य का समर्थन करें। एक बोनस की तरह लगता है !!

— जैक

इस उत्तर में चयनकर्ताओं के w3schools की बेहतर व्याख्या है।

— जेफ

Answer 2

स्वीकृत उत्तर (उपयोग करना a[href$='.pdf']) मानता है कि पीडीएफ के लिए लिंक हमेशा समाप्त होगा .pdf। यह जरूरी नहीं है कि, क्योंकि लिंक में एक क्वेरी स्ट्रिंग या हैश टुकड़ा हो सकता है, उदाहरण के लिए UTM ट्रैकिंग कोड या एक पेज नंबर, जिस स्थिति में उन लिंक का मिलान नहीं किया जाएगा। वास्तव में आपके आवेदन के आधार पर यह अधिकांश लिंक के लिए मामला हो सकता है।

<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>

यदि आप यह सुनिश्चित करना चाहते हैं कि आपका नियम उन मामलों में भी लागू हो, जिनका आप .pdfउपयोग कर रहे विशेषता में कहीं भी मिलान कर सकते हैं

a[href*='.pdf']

हालाँकि यह तब कुछ असम्बद्ध लेकिन अनपेक्षित चीजों से मेल खाएगा, जैसे कि एक उपडोमेन our.pdf.domain.com/a-page। लेकिन हम इसे और भी कम कर सकते हैं, जैसा कि हम जानते हैं कि हम इसका उपयोग केवल ऐसे पीडीएफ़ से करेंगे जो एक क्वेरी स्ट्रिंग या हैश टुकड़ा है। यदि हम 3 मामलों को जोड़ते हैं, तो हमें सभी पीडीएफ लिंक से मेल खाना चाहिए।

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}