ตัวเลือกแอตทริบิวต์ CSS ไม่ทำงานกับ href

ฉันจำเป็นต้องใช้ตัวเลือกแอตทริบิวต์ใน css เพื่อเปลี่ยนลิงค์สีและรูปภาพที่แตกต่างกัน แต่มันใช้ไม่ได้

ฉันมี html นี้:

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

และ css นี้:

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

ทำไมพื้นหลังถึงไม่เป็นสีแดง

ใช้ $ หลัง 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/

คำตอบที่ได้รับการยอมรับ (โดยใช้a[href$='.pdf']) จะถือว่าลิงก์ไปยัง 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แต่ที่ไม่ได้ตั้งใจบางอย่างเช่นโดเมนย่อย แต่เราสามารถ จำกัด มันให้แคบลงได้เนื่องจากเรารู้ว่าเราจะใช้เฉพาะไฟล์ PDF ที่มีสตริงการสืบค้นหรือส่วนแฮชเท่านั้น หากเรารวม 3 กรณีเราควรจับคู่ลิงก์ pdf ทั้งหมด

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