CSS öznitelik seçici bir href çalışmıyor

Farklı renk ve görüntüdeki bağlantıyı değiştirmek için css'de öznitelik seçiciyi kullanmam gerekiyor, ancak bu çalışmıyor.

Bu html'ye sahibim:

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

Ve bu css:

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

Arka plan neden kırmızı değil?

Href'inizden sonra $ kullanın. Bu, öznitelik değerinin dizenin sonuyla eşleşmesini sağlar.

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)

kaynak: http://www.w3.org/TR/selectors/

Kabul edilen cevap (kullanarak a[href$='.pdf']) bir pdf bağlantısının her zaman ile biteceğini varsayar .pdf. Bağlantı, örneğin bir UTM izleme kodu veya sayfa numarası ile bir sorgu dizesine veya karma parçaya sahip olabileceğinden, bu durumda bu bağlantılar eşleşmeyecektir. Aslında, uygulamanıza bağlı olarak bu, çoğu bağlantı için geçerli olabilir.

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

Kuralınızın bu durumlarda da uygulanmasını sağlamak istiyorsanız .pdf, özelliğini kullanarak özniteliğin herhangi bir yerinde eşleştirebilirsiniz.

a[href*='.pdf']

Ancak bu, alt alan adı gibi olası olmayan ancak istenmeyen şeylerle eşleşecektir our.pdf.domain.com/a-page. Ancak, onu yalnızca sorgu dizesi veya karma parçası olan pdf'lerle eşleşecek şekilde kullanacağımızı bildiğimiz için onu daha da daraltabiliriz. 3 durumu birleştirirsek, tüm pdf bağlantılarını eşleştirmeliyiz.

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