Bộ chọn thuộc tính CSS không hoạt động a href

Tôi cần sử dụng bộ chọn thuộc tính trong css để thay đổi liên kết trên các màu và hình ảnh khác nhau, nhưng nó không hoạt động.

Tôi có html này:

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

Và css này:

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

Tại sao nền không có màu đỏ?

Sử dụng $ sau href của bạn. Điều này sẽ làm cho giá trị thuộc tính khớp với phần cuối của chuỗi.

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)

nguồn: http://www.w3.org/TR/selectors/

Câu trả lời được chấp nhận (sử dụng a[href$='.pdf']) giả định rằng một liên kết đến pdf sẽ luôn kết thúc bằng .pdf. Điều đó không nhất thiết phải xảy ra, vì liên kết có thể có chuỗi truy vấn hoặc phân đoạn băm, ví dụ: với mã theo dõi UTM hoặc số trang, trong trường hợp đó, các liên kết đó sẽ không khớp. Trên thực tế, tùy thuộc vào ứng dụng của bạn, đây có thể là trường hợp cho hầu hết các liên kết.

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

Nếu bạn muốn đảm bảo quy tắc của mình cũng được áp dụng trong những trường hợp đó, bạn có thể đối sánh với .pdfbất kỳ vị trí nào trong thuộc tính bằng cách sử dụng

a[href*='.pdf']

Tuy nhiên, điều này sau đó sẽ phù hợp với một số điều không mong muốn nhưng không mong muốn, chẳng hạn như tên miền phụ our.pdf.domain.com/a-page. Nhưng chúng tôi có thể thu hẹp nó hơn nữa, vì chúng tôi biết rằng chúng tôi sẽ chỉ sử dụng nó khớp với các pdf có chuỗi truy vấn hoặc phân đoạn băm. Nếu chúng ta kết hợp 3 trường hợp, chúng ta nên khớp tất cả các liên kết pdf.

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